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。表单位于一个组件中，该组件嵌套在具有save功能的组件中。据我所知，容器应该只是将数据和事件处理程序传递给组件。如何获取SaveContent的state.someText以便我可以将其传递给容器的actions.saveDetails方法中的onSave？

Answer 1

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

我会这样做：

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}
         />
     );
 }
}

Answer 2

在React中，数据绑定是单向的，这意味着它只能单向流动。要使数据可供父组件使用，您需要在值更改时从子组件触发事件，并使父组件将新值保持在其状态。

Answer 3

您需要将一个回调传递给子组件，后者会返回状态。以下内容未经过测试，但有类似内容：

class Nested extends React.Component {
    constructor(props) {
        this.state={
            clicks: 0
        }
    }

    onClickHandler() {
        const { clicks } = this.state,
              { callBack } = this.props
        this.setState({ clicks: clicks++ }, () => callBack(this.state))
    }
    render() {
        <button onClick={ this.onClickHandler }
    }
}

class Container extends React.Component {
    callBack = (childState) => {
        // Do whatever with childState here
    }

    render() {
        <div>
            <Nested callBack={ this.callBack } />
        </div>
    }
}

React：将组件的状态传递给容器

3 个答案: