javascript - react : passing component's state to container

Question

组件的状态可以传递到其容器吗？我正在做这样的事情:

export class MyContainer extends Component {
    static propTypes = {
        dispatch: PropTypes.func.isRequired,
        someText: PropTypes.string,
        isDisabled: PropTypes.bool,
    };

    onSave = () => {
        this.props.dispatch(actions.saveDetails(this.props.someText));
    }

    render() {
        return (
            <SaveComponent onSave={this.onSave}>
                <SaveContent
                    someText={this.props.someText}
                    isDisabled={this.props.isDisabled}
                />
            </SaveComponent>
        );
    }
}

export class SaveContent extends Component {
    state = {
        someText: this.props.someText,
        disabled: this.props.isDisabled,
    };

    onInputChange = (e) => {
        const field = {};
        const { name, value } = e.target;

        field[name] = value;
        this.setState(field);
    };

    render() {
        return (
            <input
                type="text"
                name="someText"
                onChange={this.onChange}
                value={this.state.someText}
                disabled={this.state.isDisabled}
            />
        );
    }
}

组件(SaveComponent 和 SaveContent)是由其他人完成的，我只是尝试将 API 调用集成到 UI。该表单位于一个组件中，该组件嵌套在具有保存功能的组件中。据我了解，容器应该只是将数据和事件处理程序传递给组件。如何获取 SaveContent 的 state.someText 以便将其传递给容器的 onSave 方法中的 actions.saveDetails ？

Answer 1

您必须将 someText 保存到 MyContainer 的状态，并将其传递给 SaveContent。由于React中的单向绑定(bind)，父组件可以将数据传递给子组件，但子组件只能使用父组件处理和保存的某些数据来触发事件。

我会这样做:

export class MyContainer extends Component {
 static propTypes = {
     dispatch: PropTypes.func.isRequired,
     someText: PropTypes.string,
     isDisabled: PropTypes.bool,
 };

 state = { someText: this.props.someText, }

 onSave = () => {
     this.props.dispatch(actions.saveDetails(this.state.someText));
 }

 onInputChange = (field) => { this.setState(field); }

 render() {
     return (
         <SaveComponent onSave={this.onSave}>
             <SaveContent
                 onInputChange={this.onInputChange}
                 value={this.state.someText}
                 someText={this.props.someText}
                 isDisabled={this.props.isDisabled}
             />
         </SaveComponent>
     );
 }
}

export class SaveContent extends Component {
 state = {
      // someText: this.props.someText,
      disabled: this.props.isDisabled,
  };

 onInputChange = (e) => {
     const field = {};
     const { name, value } = e.target;

     field[name] = value;
     // this.setState(field);
     this.props.onInputChange(field);
 };

 render() {
     return (
         <input
             type="text"
             name="someText"
             onChange={this.onInputChange}
             value={this.props.value}
             disabled={this.state.isDisabled}
         />
     );
 }
}