如何在反应 class 组件中更新另一个组件的 state。 保存功能

Question

如何在反应 class 组件中更新另一个组件的 state。

我有两个 class 反应。

我的组件和我的容器。

export default class MyContainer extends BaseComponent{
    constructor(props: any) {
        super(props, {
            status : false, 
            nameValue :"",
            contentValue : ""
        });
    }
    componentDidMount = () => {
        console.log(this.state.status);
    };
    save = () => {
        console.log("Hello I am Save");
        let obj: object = {
            nameValue: this.state.nameValue, // here I am getting empty string
            templateValue: this.state.contentValue
        };
        // API Call
    };
    render() {
        return (
            <div>
                <MyComponent
                    nameValue = {this.state.nameValue} 
                    contentValue = {this.state.contentValue} 
                ></MyComponent>   
                <div >
                    <button  type="button"  onClick={this.save} >Save</button>
                </div>
            </div>
        );
    }
}

我的组件

export default class MyComponent extends BaseComponent{
    constructor(props: any) {
        super(props, {});
        this.state = {
            nameValue : props.nameValue ? props.nameValue : "",
            contentValue : props.contentValue ? props.contentValue : "",
            status : false
            
           
        }
    }
    componentDidMount = () => {
        console.log("MOUNTING");
    };

    fieldChange = (id:String, value : String) =>{
        if(id === "content"){
            this.setState({nameValue:value});
        }else{
            this.setState({contentValue:value});
        }
    }
     

    render() {
        return (
            <div>
                <div className="form-group">
                    <input id="name" onChange={(e) => {this.fieldChange(e)}}></input>
                    <input  id = "content"  onChange={(e) => {this.fieldChange(e)}} ></input>
                </div>
            </div>
        );
    }
}

在 MyComponent 中，我在更改 state 的位置放置了两个输入字段。

我在 MyContainer 中的保存按钮。 在保存按钮中，我无法读取 MyComponent 的值。 实现这一目标的最佳方法是什么。

Answer 1

您应该在MyContainer中更新您的 state 以便save以查看 state 更改。 每个组件都有自己的 state，这使得MyComponent的 state 与MyContainer的唯一。 你应该做的是将 state 保留在你的父/容器组件中，然后将它作为道具传递下去（而不是在你的孩子中复制它）。 为此，将fieldChange向上移动到MyContainer function，并删除MyComponent中重复的nameValue和contentValue state。 有关更多详细信息，请参见代码注释：

export default class MyContainer extends BaseComponent{
    ... 

    fieldChange = (id:String, value : String) =>{
        if(id === "content"){
            this.setState({nameValue: value});
        } else {
            this.setState({contentValue: value});
        }
    }

    render() {
        return (
            <div>
                <MyComponent
                    nameValue={this.state.nameValue} 
                    contentValue={this.state.contentValue}
                    onFieldChange={this.fieldChange} /* <---- Pass the function down to `MyComponent` */
                /> 
                ...
            </div>
        );
    }
}

然后在MyComponent中调用this.props.onFieldChange ：

export default class MyComponent extends BaseComponent{
    // !! this constructor can be removed as no state is being initialized anymore !!
    constructor(props: any) {
        super(props);
        // removed state as we're using the state from `MyContainer`
    }

    componentDidMount = () => {
        console.log("MOUNTING");
    };

    render() {
        return (
            <div>
                <div className="form-group">
                    <input id="name" onChange={(e) => {this.props.fieldChange(e)}} /> /* <--- Change to `this.props.fieldChange()`. `<input />` is a self-closing tag.
                    <input  id = "content"  onChange={(e) => {this.props.fieldChange(e)}} />
                </div>
            </div>
        );
    }
}

一些附加说明：

• 如果您的组件不使用this.props.children ，那么您应该将其称为<MyComponent... props... />而不是<MyComponent... props...></MyComponent>
• fieldChange中的 if 语句看起来颠倒了，应该检查if(id === "name") 。 我假设这是你问题中的一个错误。
• 您只在示例代码中将一个参数传递给fieldChange 。 我再次假设这是你问题中的一个错误。