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：通过执行以下操作，使控制台.log记录对象属性的值：

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

现在它是关于获取渲染每个对象prop的函数，以及创建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);
  }

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

Answer 1

如果我理解正确你需要：

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

这将为您提供一系列带有待办事项道具的CalcTimeItem组件，然后您可以将其渲染。

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

1 个答案: