React如何修改props && 子组件调用父组件方法

/**
 * 子组件如何更改父组件的state呢？
 * 父组件传递下来的props不满足要求，往往需要修改
 * 
 * 
 * Author: shujun
 * Date: 2020-10-25
 */

import React from 'react';


export default class Father extends React.Component{
    state = {
        inputValue: 'shujun',
        objValue: {'name': 'jay', 'sex': 'boy'}
    };

    changeInputValue = (e)=> {
        this.setState({inputValue: e.target.value});
    }

    changeObjValue = (e)=> {
        let objValue = this.state.objValue;
        objValue.name = e.target.value;
        this.setState({objValue});
    }

    render(){
        const {inputValue, objValue} = this.state;
        return <div style={{width: '600px', paddingBottom: '20px', border: '1px solid red' }}>
            <h3>father:</h3> 
            <p>
                react的state是可以修改，props是不让修改的，为什么要这么做呢，还不理解 ,,ԾㅂԾ,, <br/>
                但是我现在就是想要修改props, 因为这样的场景很多：父组件传递下来的props不满足要求，往往需要修改
            </p>
            <input value={inputValue} onChange={this.changeInputValue}/>
            state:  inputValue -- {inputValue}  <br/>

            <input value={objValue.name} onChange={this.changeObjValue}/>
            state:  objValue -- {JSON.stringify(objValue)}  <br/>

            <Son1 inputValue={inputValue} objValue={objValue} />

            <Son2 inputValue={inputValue} objValue={objValue} 
                changeInputValue={this.changeInputValue} changeObjValue={this.changeObjValue} />
        </div>    
    }
    
}


class Son1 extends React.Component {
    constructor(props){
        super();
        this.state = {flag: true};
    }

    changeInputProps = (e)=> {
        this.props.inputValue = e.target.value;
    }

    changeObjProps = (e)=> {
        console.log(e.target.value);
        let objValue = this.props.objValue;
        objValue.name = e.target.value;
        console.log(objValue);
        this.setState({flag: true});
    }

    render() {
        const {inputValue, objValue} = this.props;

        return <div style={{border: '1px solid green', marginTop: '20px'}}>
            <h3>Son1: </h3>
            <p>
                只要props是对象，不改对象指针，只修改对象里面的内容, 照样能修改props, O(∩_∩)O
                <br/> 但是注意：在change props后，一定要假装在setState, 引发render
            </p>

            <input value={inputValue} onChange={this.changeInputProps}/>
            props:  inputValue -- {inputValue}  <br/>

            <input value={objValue.name} onChange={this.changeObjProps}/>
            props:  objValue -- {JSON.stringify(objValue)}  <br/>
        </div>;
    }
 }


 class Son2 extends React.Component {
    changeObjProps = (e)=> {
        this.props.changeObjValue(e);
    }

    render() {
        const {inputValue, objValue} = this.props;

        return <div style={{border: '1px solid green', marginTop: '20px'}}>
            <h3>Son2: </h3>
            <p>
                1. 父组件传递修改方法下来，子组件中调用父组件方法，修改的实际是父组件的state <br/>
                2. 父组件state修改了，
            </p>

            <input value={inputValue} onChange={(e)=>this.props.changeInputValue(e)}/>
            props:  inputValue -- {inputValue}  <br/>

            <input value={objValue.name} onChange={this.changeObjProps}/>
            props:  objValue -- {JSON.stringify(objValue)}  <br/>
        </div>;
    }
 }

 

运行效果：

完整代码：https://gitee.com/loveCode666/study_react/blob/master/src/react_grammar/special_topics/1changeProps.js

标签：&&,React,修改,state,inputValue,objValue,props,组件
来源： https://www.cnblogs.com/shujun-code/p/13905096.html