如何避免 Material UI 中的重复道具？反应 JS。

Question

我根据 Material-UI 中的组件创建了表单。我想控制 state 来自父组件的输入，如下所示，但出现错误 "No duplicate props allowed"。是的，这对我来说很有意义——我有 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>
);}}

Answer 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}
/>

您已定义 onChange 3 次。

解决方案是创建一个方法来为您调用这三个处理程序并将该方法用于 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();
}

Answer 2

改变这个

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

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

Answer 3

我想扩展@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() 调用中完成您想要的一切。

如何避免 Material UI 中的重复道具？反应 JS。

How avoid duplicate props in Material UI? React JS.

javascript

reactjs

material-ui

react-props