Javascript 如何避免材料界面中的重复道具？反应JS。

我根据MaterialUI中的组件创建了表单。我想控制来自父组件的输入状态，如下所示，但我有一个错误，不允许重复道具。是的，这对我来说很有意义-我有3次改变参数。我很好奇，是可以解决它，还是我需要完全整理代码

父组件

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

handleChange(e) {
  this.handleTextFieldChange(e);
  this.handleChangeDate();
  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)} onChange={this.handleChangeDate} onChange={this.handleChangeSelectField}
/>

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

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

handleChange(e) {
  this.handleTextFieldChange(e);
  this.handleChangeDate();
  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)} onChange={this.handleChangeDate} onChange={this.handleChangeSelectField}
/>

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

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

handleChange(e) {
  this.handleTextFieldChange(e);
  this.handleChangeDate();
  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)} 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();}} 
/>

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

更改此设置

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

---

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

我想在@dangling cruze的答案上展开

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

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

。。。这将执行所有3个函数，并将产生您想要的功能，但是，由于这些函数中的每一个都是如何定义的，因此您还要执行三次setState，这不是最佳的

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

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通话中完成您想要的所有操作。

我想进一步介绍@dangling cruze的答案

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

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

。。。这将执行所有3个函数，并将产生您想要的功能，但是，由于这些函数中的每一个都是如何定义的，因此您还要执行三次setState，这不是最佳的

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

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调用中完成您想要的所有操作。

是的，我定义了三次。问题是如何创建该方法和调用处理程序？在答案中更新。别忘了将其绑定到构造函数中的方法。是的，我已经定义了三次。问题是如何创建该方法和调用处理程序？在答案中更新。别忘了将其绑定到构造函数中的方法。完全正确！我本来打算下一步编辑的，但既然你已经编辑了。。荣誉：@DanglingCruze，谢谢。只需确保参数的顺序正确即可。如果这解决了你的问题，请考虑将它标记为接受。祝你好运。@Italik，在函数中添加一些if大小写，并确定要更新状态的哪一部分。例如，如果输入日期与以前存储在状态中的日期不同，请更新它，否则不要更新。@Italik，我编辑了问题。这可能不是一个现成的复制粘贴解决方案，但我认为这应该有助于您继续执行其余的实现。我从未使用MaterialUI，所以我不知道它的来龙去脉，但我假设一次只能触发一个事件？如果是这样，您不需要使用obj，只需在每个If中直接执行setState，也可以使用else If。我在上面添加的实现构建了一个对象，然后将其设置为新状态，并且只有在多个事件可以同时更改时才真正有用。@DanglingCruze，在本文中，您是对的，因为它发生在事件处理程序中。然而，在其他情况下，这可能不会发生。因此，虽然您在技术上是正确的，但最好使用始终有效的任何方法。我认为最好的做法是永远不要调用SETSTATE。此外，它还使您的代码更具可读性。。。你说得对，完全正确！我本来打算下一步编辑的，但既然你已经编辑了。。荣誉：@DanglingCruze，谢谢。只需确保参数的顺序正确即可。如果这解决了你的问题，请考虑将它标记为接受。祝你好运。@Italik，在函数中添加一些if大小写，并确定要更新状态的哪一部分。例如，如果输入日期与以前存储在状态中的日期不同，请更新它，否则不要更新。@Italik，我编辑了问题。这可能不是一个现成的复制粘贴解决方案，但我认为这应该有助于您继续执行其余的实现。我从未使用MaterialUI，所以我不知道它的来龙去脉，但我假设一次只能触发一个事件？如果是这样，您不需要使用obj，只需在每个If中直接执行setState，也可以使用else If。我在上面添加的实现构建了一个对象，然后将其设置为新状态，并且只有在多个事件可以同时更改时才真正有用。@DanglingCruze，在本文中，您是对的，因为它发生在事件处理程序中。然而，在其他情况下，这可能不会发生。因此，虽然您在技术上是正确的，但最好使用始终有效的任何方法。我认为最好的做法是永远不要调用SETSTATE。此外，它还使您的代码更具可读性。。。不过，你的观点是正确的。