1

我基于 Material-UI 中的组件创建了表单。我想控制state来自父组件的输入，如下所示，但出现错误“不允许重复道具”。是的，这对我来说很有意义——我有 3 倍的onChange参数。我很好奇是否有可能解决它或者我需要完全安排代码？

父组件

handleSubmitTask = (e) =>{
  alert()
 });
}

handleTextFieldChange = (event) =>{
  this.setState({
  nameTask: event.target.value,  
 });
}

handleCloseEditDialog = () => {
  this.setState({openEdit: false});
}

handleChangeDate = (event, date) => {
  this.setState({
  deadline: date
});
}

handleChangeSelectField = (event, index, priority) => {
 this.setState(
   {priority}
 );
}

render() {
 const actionsEdit = [
  <FlatButton label="Edit" primary={true} keyboardFocused={true} onClick={e => this.handleSubmitTask(e)} />,
  <FlatButton label="Cancel" primary={true} onClick={this.handleCloseEditDialog} />
]; 

return (
  <div>
    <EditTaskDialog open={this.state.openEdit} actions={actionsEdit} 
    nameTask={this.state.nameTask} priority={this.state.priority} deadline={this.state.deadline}
    onChange={e => this.handleTextFieldChange(e)} onChange={this.handleChangeDate} onChange={this.handleChangeSelectField}
    />
  </div>
);
}}

export default Home;

子组件：

render() {
  return (
   <form>
    <Dialog title="Edit your Task" open={this.props.open} actions={this.props.actions}>
      <TextField floatingLabelText="Task" value={this.props.nameTask} errorText={this.state.nameTaskError}
      onChange={this.props.onChangeText} onKeyPress={this.handleKeyPress}/>
      <DatePicker floatingLabelText="Deadline" value={this.props.deadline} onChange={this.props.onChangeDate} />
      <SelectField floatingLabelText="Priority" value={this.props.priority} onChange={this.props.onChangeSelect}>
          <MenuItem value="High" primaryText="High" />
          <MenuItem value="Medium" primaryText="Medium" />
          <MenuItem value="Low" primaryText="Low" />
      </SelectField>
    </Dialog>  
  </form>
);}}
4

3 回答 3

3

我想扩展@dangling-cruze 的答案。

虽然您可以创建一个函数，例如...

handleChange(e) {
  this.handleTextFieldChange(e);
  this.handleChangeDate();
  this.handleChangeSelectField();
}

...这将执行所有 3 个功能并产生您想要的功能，但是，由于每个功能的定义方式，您还需要执行setState()3 次，这不是最佳的。

相反，为什么不在一个函数中实现所有这些功能呢？像这样：

handleChange(event, index, date, priority) {
  let obj = {};
  if(date !== this.state.deadline) {
    obj.deadline = date;
  }
  if(event.target.value !== this.state.nameTask) {
    obj.nameTask = event.target.value;
  }
  if(priority !== this.state.priority) {
    obj.priority = priority;
  }
  this.setState(obj);
}

这将在一个 setState()呼叫中完成您想要的一切。

于 2018-01-04T13:00:08.127 回答
1

在父组件中，在这一行：

<EditTaskDialog open={this.state.openEdit} actions={actionsEdit} 
nameTask={this.state.nameTask} priority={this.state.priority} deadline={this.state.deadline}
onChange={e => this.handleTextFieldChange(e)} onChange={this.handleChangeDate} onChange={this.handleChangeSelectField}
/>

您已经定义了onChange3 次。

解决方案是创建一个方法，为您调用这三个处理程序并将该方法用于onChange.

我希望这会有所帮助。

编辑：

<EditTaskDialog open={this.state.openEdit} actions={actionsEdit} 
nameTask={this.state.nameTask} priority={this.state.priority} deadline={this.state.deadline} onChange={this.handleChange}/>

然后在组件中定义一个方法：

handleChange(e) {
  this.handleTextFieldChange(e);
  this.handleChangeDate();
  this.handleChangeSelectField();
}
于 2018-01-04T12:47:38.160 回答
0

改变这个

<EditTaskDialog open={this.state.openEdit} actions={actionsEdit} 
nameTask={this.state.nameTask} priority={this.state.priority} deadline={this.state.deadline}
onChange={e => this.handleTextFieldChange(e)} onChange={this.handleChangeDate} onChange={this.handleChangeSelectField}
/>

对此

<EditTaskDialog open={this.state.openEdit} actions={actionsEdit} 
nameTask={this.state.nameTask} priority={this.state.priority} deadline={this.state.deadline}
onChange={e => {this.handleTextFieldChange(e); this.handleChangeDate(); this.handleChangeSelectField();}} 
/>

这样你所有的函数调用都在一个函数中

于 2018-01-04T12:54:01.850 回答