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

Question

我有一个组件CalcTime，它保存着看起来像这样的状态：

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

createTask看起来像这样：

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

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

我意识到有必要在CalcTime上具有saveNewState功能，并将其传递给CalcTimeItem。 但是我一生都无法弄清楚如何渲染每个输入字段，以及如何将每个字段的值与saveNewState功能连接起来。 有人做过吗？ 我试图映射，并做它Object.keys（obj）.map（），但这些概念对我来说还是有点太新了。

编辑：CalcTimeItem渲染函数如下所示：

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

编辑2：通过执行以下操作，将其转到console.log对象属性的值：

renderEditInputs = (e) => {
    let o = this.props.state[e];
    Object.keys(o).forEach(function(key){
      var value = o[key];
      console.log(value);
    })
  }

现在，要获取该函数以呈现每个对象的道具，并创建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);
  }

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

Answer 1

如果我对您的理解正确，则需要以下内容：

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

这将为您提供带有todo道具的CalcTimeItem组件数组，然后可以进行渲染。