Question

我想做的是：

在父组件上，我具有onChange = this.handleChange，它对于textInputs可以正常工作，它允许我转到表单的下一步，但无论我做什么，它都不会设置dropDowns的状态，如果下拉菜单为空，并且我在子级上设置了setState下拉菜单，无法在需要的父级上触发handleChange

    class CompanyInfo extends React.Component {
      constructor(props) {
        super(props);
        this.state =  {
        value: this.props.company,};
        this.handleChange = this.props.onChange.bind(this);
     }

      render() {
      return(
       <SelectInput value={this.state.value}
                onChange={this.handleChange}           
                floatingLabelText={messages.company[lang]}
                floatingLabelFixed={true}
                >
       {this.props.company.map((element) => {
        return <MenuItem value={element.Value} primaryText={element.Value} />})}           
      </SelectInput> 


parent:

        handleChange = (event) => { 
           console.log("test");
            const { stepIndex } = this.state; 
            const target = event.target;
            const value = target.type === 'checkbox' ? target.checked : target.value;
            const name = target.name;

            var type = null;
            switch(stepIndex) {
                case 0: type='UPDATE_CINFO'; break;
                case 1: type='UPDATE_PINFO'; break;

                default: break;
            }
            this.props.dispatch(updateCurrentForm( type, { [name]: value } ));

            this.setState( this.state , () =>  this.validateFields()  )

        }

Answer 1

只需直接在子组件中使用handleChange的属性。而且，您还应该只在一个位置控制状态，并将状态值用作子组件中的道具。

render() {
  const {handleChange, company} = this.props

  return(
   <SelectInput value={company}
            onChange={handleChange}           
            floatingLabelText={messages.company[lang]}
            floatingLabelFixed={true}
            >
...
}

父组件和子组件中的handleChange？

1 个答案: