Javascript 如何为同一状态保存不同的输入值

我有一个包含多个组件的表，当更改所选输入的值时，我希望使用以下内容将新值保存在父状态（因此我可以这样提交）：

是否可以用一个onChange函数来实现这一点？如果没有，如何使用多个处理功能来执行此操作？ 记住，这是一周中所有的日子都要做的

父组件：

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      editMode: false,
      friday: { endTime: "", startTime: "" },
      monday: { endTime: "", startTime: "" },
      thursday: { endTime: "", startTime: "" },
      tuesday: { endTime: "", startTime: "" },
      wednesday: { endTime: "", startTime: "" },
      saturday: { endTime: "", startTime: "" },
      sunday: { endTime: "", startTime: "" }
    };
  }

  handleInput = e => {
    let value = e.target.value;
    let name = e.target.name;
    console.log(value);

    this.setState(
      {
        monday: { startTime: value, endTime: "" }
      },
      () => console.log(this.state)
    );
  };

  handleFormSubmit = e => {
    e.preventDefault();

    this.setState({
      editMode: false
    });
  };

  render() {
    return (
      <div className="App">
        <Table
          onSubmit={this.handleFormSubmit}
          onChange={this.handleInput}
          edit={this.state.editMode}
        />
        <div>
          {!this.state.editMode ? (
            <button onClick={() => this.setState({ editMode: true })}>
              edit
            </button>
          ) : (
            <div>
              <button onClick={() => this.setState({ editMode: false })}>
                cancel
              </button>
              <button onClick={this.handleFormSubmit}>save</button>
            </div>
          )}
        </div>
      </div>
    );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
编辑模式：false，
星期五：{endTime:，startTime:}，
星期一：{endTime:，startTime:}，
星期四：{endTime:，startTime:}，
星期二：{endTime:，startTime:}，
星期三：{endTime:，startTime:}，
星期六：{结束时间：，开始时间：}，
星期日：{endTime:，startTime:}
};
}
handleInput=e=>{
设值=e.target.value；
让name=e.target.name；
console.log（值）；
这是我的国家(
{
星期一：{startTime:value，endTime:}
},
（）=>console.log（this.state）
);
};
handleFormSubmit=e=>{
e、 预防默认值（）；
这是我的国家({
编辑模式：false
});
};
render（）{
返回(
{！这是.state.editMode吗(
this.setState（{editMode:true}}>
编辑
) : (
this.setState（{editMode:false}}>
取消
拯救
)}
);
}
}

表组件：

    export default class Table extends React.Component {
    constructor(props) {
        super(props);

    this.state = {
      weekDays: moment.weekdays(true)
    };
  }

  submitTime = data => {
    this.props.onSubmit(data);
  };

  render() {
    return (
      <table style={{ textAlign: "center" }}>
        <thead>
          <tr>
            <td style={{ opacity: 0 }} />
            {this.state.weekDays.map(day => {
              return (
                <td key={day}>
                  <p>{day}</p>
               </td>
              );
            })}
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <p>Opening:</p>
            </td>
            {[0, 1, 2, 3, 4, 5, 6].map(open => {
              return (
                <td key={open}>
                  {this.props.edit ? (
                    <form onSubmit={this.props.onSubmit}>
                      <input
                        onChange={this.props.onChange}
                        placeholder="open time"
                        defaultValue={open}
                      />
                    </form>
                  ) : (
                    <p>{open}</p>
                  )}
                </td>
              );
             })}
          </tr>
          <tr>
             <td>
              <p>Closing:</p>
            </td>
            {[0, 1, 2, 3, 4, 5, 6].map(close => {
              return (
                <td key={close}>
                  {this.props.edit ? (
                    <form onSubmit={this.props.onSubmit}>
                      <input
                        onChange={this.props.onChange}
                        placeholder="close time"
                        defaultValue={close}
                      />
                    </form>
                  ) : (
                    <p>{close}</p>
                   )}
                </td>
              );
            })}
          </tr>
        </tbody>
      </table>
    );
  }
}

导出默认类表扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
工作日：时刻。工作日（真）
};
}
submitTime=数据=>{
this.props.onSubmit（数据）；
};
render（）{
返回(
{this.state.weekDays.map（day=>{
返回(
{day}

);
})}
开幕式：

{[0,1,2,3,4,5,6].map（open=>{
返回(
{this.props.edit(
) : (
{open}

)}
);
})}
结束：

{[0,1,2,3,4,5,6].map（close=>{
返回(
{this.props.edit(
) : (
{close}

)}
);
})}
);
}
}

---

谢谢大家!

在每个

输入的
onChange
功能中，您可以将输入的索引作为参数发送：

{[0, 1, 2, 3, 4, 5, 6].map(close => {
    return (
        <td key={close}>
            {this.props.edit ? (
                <form onSubmit={this.props.onSubmit}>
                    <input
                        onChange={this.props.onChange(close)}

最后一步是简单地将索引映射到正确的日期：

const day = ['monday', 'tuesday', 'wednesday'...][index]

并根据所选日期修改您的状态：

this.setState(
    {
        [day]: { startTime: value, endTime: "" }
    }
)

就个人而言，我建议直接映射天数数组，而不是
[0,1,2,3,4,5,6]
来删除步骤，但这取决于您


编辑

刚才看到了您的代码，因为您有两种类型的输入，它可能会导致其他问题。要区分发送的值，可以执行与之前完全相同的操作，并发送要修改的值类型：

开始时间：

<input
    onChange={this.props.onChange(open, 'startTime')}
    placeholder="close time"
    defaultValue={close}
/>

现在棘手的部分是
setState
。不能更新嵌套对象中的单个元素，必须解构旧对象，并覆盖相应的值：

this.setState(prev =>
    ({
        [day]: { 
            ...prev[day],
            [type]: value
        }
    })
)

是的，这是可能的。它的工作方式与更新任何对象相同

let monday = Object.assign({}, this.state.monday)
monday.startTime = value_1
monday.endTime = value_2

this.setState({ monday: monday })

注意
Object.assign（）
的用法。如果不创建对象的副本，则将直接更新状态。例如：

let monday = this.state.monday
monday.startTime = value_1

与执行以下操作相同：

this.state.monday = value_1

这是在React中绝对不应该做的。
+1这确实是updatnig动态键处于状态的方式。这就是所谓的计算属性名，请参阅此处的文档：谢谢，我将检查这一点。您可以将您的解决方案应用到我的CodeSandBox工作示例中吗@TreycosI认为我改变了答案中你需要的一切，你在挣扎什么？你为开始时间提供了价值，但你如何为结束时间提供价值？因为在表中，开始时间和结束时间是分开的
。其余的我都明白了
this.setState(prev =>
    ({
        [day]: { 
            ...prev[day],
            [type]: value
        }
    })
)

let monday = Object.assign({}, this.state.monday)
monday.startTime = value_1
monday.endTime = value_2

this.setState({ monday: monday })

let monday = this.state.monday
monday.startTime = value_1

this.state.monday = value_1