Javascript 编辑整行输入，然后更新另一个组件中的状态

我有一个组件CalcTime，它保存的状态如下：

todos: [{name: 'firstmname', title: 'assistant', startTime: '0800', endTime: '1600'}, {name: 'secondname', title: 'boss', startTime: '0700', endTime: '1700'} etc...]

renderEditInputs = (e) => {
    let o = this.props.state[e];
    let r = FUNCTION HERE
    return(
      <div>{r}</div>
    );
  }
  renderTaskSection = () => {
    const {title, start, end}= this.props;
    if(this.state.isEditing){
      return(
        <div class="flex row">
          <form onSubmit={this.onSaveClick}>
            {this.renderEditInputs(this.props.id)}
          </form>
        </div>
      )
    }
return (
      <div>
        <button onClick={this.onEditClick}>Edit</button>
        <button onClick={this.onDeleteClick}>Delete</button>
      </div>
    )
  }
  render = () => {
    return (
      <div class="flex row center" id={this.props.id}>
        {this.renderTaskSection()}
        {this.renderActionsSection()}
      </div>
    )
  }

createTask如下所示：

createTask = ({title, start, end}) => {
    this.state.todos.push({
      name,
      title,
      startTime,
      endTime
    });
    this.setState({
      todos: this.state.todos
    })

在组件CalcTimeItem中，我已经从CalcTime传递了状态，我希望在单击主编辑按钮时呈现整行输入。然后，我希望每个输入字段显示其当前值，当更改并单击save按钮时，我希望将这些新值传递到CalcTime状态

我意识到有必要在CalcTime上具有saveNewState功能，并将其传递给CalcTimeItem。但我一辈子都不知道如何渲染每个输入字段，以及如何将每个字段的值与saveNewState功能连接起来。以前有人这样做过吗？我尝试过映射，并尝试使用Object.keys（obj）.map（）实现它，但这些概念对我来说还是有点太新了

编辑：CalcTimeItem renderfunction如下所示：

todos: [{name: 'firstmname', title: 'assistant', startTime: '0800', endTime: '1600'}, {name: 'secondname', title: 'boss', startTime: '0700', endTime: '1700'} etc...]

renderEditInputs = (e) => {
    let o = this.props.state[e];
    let r = FUNCTION HERE
    return(
      <div>{r}</div>
    );
  }
  renderTaskSection = () => {
    const {title, start, end}= this.props;
    if(this.state.isEditing){
      return(
        <div class="flex row">
          <form onSubmit={this.onSaveClick}>
            {this.renderEditInputs(this.props.id)}
          </form>
        </div>
      )
    }
return (
      <div>
        <button onClick={this.onEditClick}>Edit</button>
        <button onClick={this.onDeleteClick}>Delete</button>
      </div>
    )
  }
  render = () => {
    return (
      <div class="flex row center" id={this.props.id}>
        {this.renderTaskSection()}
        {this.renderActionsSection()}
      </div>
    )
  }

现在，让函数呈现每对象属性，并创建saveNewState函数，该函数获取新的输入值并更新状态

EDIT3:让它与输入一起工作：

onEdit = () => {
    console.log('testing onEdit functionality')
  }
renderEditInputs = (e) => {
    let array = [];
    let o = this.props.state[e];
    Object.keys(o).forEach(function(key){
      var value = o[key];
      console.log(value);
      array.push(<input defaultValue={value} key={key} onChange={this.onEdit}></input>)
    })
    return (array);
  }

onEdit=（）=>{
console.log（'测试onEdit功能'）
}
renderditinput=（e）=>{
让数组=[]；
设o=this.props.state[e]；
Object.keys（o）.forEach（函数（key）{
var值=o[键]；
console.log（值）；
array.push（）
})
返回（数组）；
}

---

现在我只是将输入推送到数组“array”，然后返回输入数组。但是，onChange=}this.onEdit}不起作用，控制台会给我以下错误：“uncaughttypeerror:无法读取未定义的属性'onEdit'。

如果我理解正确，您需要类似以下内容：

var calcTimeItems = this.state.todos.map(function(todo) {
     return (<CalcTimeItem todo={todo}/>);
   });

var calcTimeItems=this.state.todos.map（函数（todo）{
返回（）；
});

---

这将为您提供一组带有todo道具的

CalcTimeItem

组件，然后您可以渲染这些组件。

感谢您的输入！如果您看到更新后的帖子，您将找到r函数。这就是我计划编辑功能的地方，有一个回调函数，类似于下面的.props.saveNewState，它将是从CalcTime组件传递下来的函数。