Question

我使用react来构建一些输入表单。虽然所有儿童输入都有自己的状态来存储值，但我不知道如何处理父母。这是一个例子：

class FormComponent extends Component {

    constructor(props) {
        super(props);

        this.state = {
            title: null,
            someAmount: null
        }
    }

    render() {
        let me = this;

        return (
            <div>
                <TextField
                    value={me.state.title}
                    onChange={(proxy, value) => {
                            me.setState({title: value})
                            me.hanleChnage();
                        }
                    }
                />
                <TextField
                    value={Number.parseFloat(me.state.someAmount)}
                    onChange={(proxy, value) => {
                            if (!isNaN(Number.parseFloat(value))) {
                                me.setState({someAmount: value})
                                me.hanleChnage();
                            }
                        }
                    }
                />
            </div>    
           )     
    }

    handleChange() {
        //Calling the parent
        //State here is outdated
        this.props.onUpdate && this.props.onUpdate(this.state);
    }
}

export default FormComponent;

或者我可以在哪里找到一些使用compex表单的例子，其中包含很多反应。谢谢！

Answer 1

听起来你需要考虑将你的一些状态转移到父组件中。 React文档有一篇关于this的好文章。

总而言之，如果您在父级中声明了该功能，则可以将hanleChnage();函数作为道具传递给子组件。

function handleChange() { //do something... }
...
<ChildComponent parentOnChange={this.handleChange.bind(this) />

随着组件的复杂性增加，您可能会考虑使用Redux进行状态管理，因此可以作为应用程序中所有状态的单一来源。

Answer 2

设置子属性（例如callParentProperty）以引用父组件中的函数（例如parentFunction）。

class ParentComponent extends Component{
   parentFunction(parameter) {
      console.log("This is the form value");
      console.log(parameter);
   }
   render() {
      return <FormComponent callParentFunctionProperty={this.parentFunction.bind(this)} />
   }
}
class FormComponent extends Component {
    ...
    handleChange() {
      ...
      let formValue = this.state.someAmount;
      this.props.callParentFunctionProperty(formValue);
    }
}

反应句柄状态更新

2 个答案: