如何从一个函数更新状态值，而不是每个值都有自己的事件侦听器？答案

【问题标题】：How can I update values in state from one function rather than each value having its own event listener?如何从一个函数更新状态值，而不是每个值都有自己的事件侦听器？
【发布时间】：2020-04-22 23:12:35
【问题描述】：

背景，我目前正在开发基于 React 的 Food Truck Finder 应用程序。据我了解，在反应中，如果您想更改 state 中的值，您必须有一个监听器，例如：

handleTruckTypeChange = (idx) => (e) => {
    const newTrucks = this.state.data.map((truck, sidx) => {
      if (idx !== sidx) return truck;
      return { ...truck, type: e.target.value };
    });

    this.setState({ data: newTrucks });
  }

这对于我在表中的一些其他值工作正常，但我的日程对象有一个大对象。它处理几十个值，我不想为每个值编写一个特殊的事件侦听器。最重要的是，我有一个使用 idx 作为索引的计划对象数组。例如，每一天都有一个 startTime、endTime、openClosed 和 cost。

有没有办法让它们都由同一个事件侦听器处理，所以我不会制作 7 个相同函数的副本来处理每个更改？

我如何调用 onChange 的示例。

<td>
 <FormControl className={classes.margin}>
  <InputLabel htmlFor="openClosed">O/C</InputLabel>
  <NativeSelect
    id="openClosed"
    value={this.state.schedule[idx].monOpen}
    onChange={this.handleScheduleChange(idx)}
    input={<BootstrapInput />}
  >
   <option aria-label="None" value="" />
   <option value={"0"}>Open</option>
   <option value={"1"}>Closed</option>
  </NativeSelect>
 </FormControl>
</td>

【问题讨论】：

现在每次修改对象中的相同type键时都执行return { ...truck, type: e.target.value };，或者你有一些特殊的[type]？因为将其存储为[idx]: e.target.value，然后stata.data[idx] 是数据中的相关卡车

标签： reactjs state

【解决方案1】：

你可以创建一个函数handleOnChange

handleOnChange = field => event => {
    this.setState({[field]: event.target.value})
  }

现在您可以在需要更新状态时调用此函数，并将您想要更改的状态作为参数。

适合你的场景

<td>
 <FormControl className={classes.margin}>
  <InputLabel htmlFor="openClosed">O/C</InputLabel>
  <NativeSelect
    id="openClosed"
    value={this.state.schedule[idx].monOpen}
    onChange={this.handleOnChange('schedule[idx].monOpen')}
    input={<BootstrapInput />}
  >
   <option aria-label="None" value="" />
   <option value={"0"}>Open</option>
   <option value={"1"}>Closed</option>
  </NativeSelect>
 </FormControl>
</td>

【讨论】：

【解决方案2】：

在你们的帮助下，我想出了自己的小方法。我就是这样做的。

handleScheduleChange = (idx) => (e) => {
    const target = e.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      schedule: this.state.schedule.map((item, itemIndex) => {
        if (itemIndex === idx) {
          return {
            ...item,
            [name]: value
          }
        }
        return item;
      })
    });
   console.log(this.state.schedule[idx]);
  };

<td>
                                    <FormControl className={classes.margin}>
                                      <InputLabel htmlFor="openClosed">O/C</InputLabel>
                                      <NativeSelect
                                        id="openClosed"
                                        name="monOpen"
                                        value={this.state.schedule[idx].monOpen}
                                        onChange={this.handleScheduleChange(idx)}
                                        input={<BootstrapInput />}
                                      >
                                        <option aria-label="None" value="" />
                                        <option value={"0"}>Open</option>
                                        <option value={"1"}>Closed</option>
                                      </NativeSelect>
                                    </FormControl>
</td>

重要的是您为每个组件指定一个与您要更改的状态值一致的名称值，同时传入数组的索引，以便更新正确的。这始终有效，因此如果它们都在状态中访问相同的数组，您可以将其传递给多个函数，对于这个例子，我有 this.state.schedule

【讨论】：