将数组值调用到输入字段

Question

在我的应用程序中单击编辑按钮时，会出现带有保存按钮的输入字段。基本上它是一个todo应用程序。我要做的是编辑输入的值。当我单击编辑按钮时，相应待办事项的值应存储在我要编辑的输入字段中。我在存储各自的价值方面遇到了问题。我的代码是这样的：

    class App extends React.Component {

  

constructor(){
  super();
  this.state={
    todo:[],
     editing:false
  };
};

entertodo(keypress){
  var Todo=this.refs.inputodo.value;
  if( keypress.charCode == 13 )

  {
    this.setState({
      todo: this.state.todo.concat({Value:Todo, checked:false})
    });
    this.refs.inputodo.value=null;
  };
};
todo(todo,i){
  return (
    <li className={todo.checked===true? 'line':'newtodo'}>
      <div onClick={this.todoCompleted.bind(this, i)}>
        <input type="checkbox" className="option-input checkbox" checked={todo.checked} />
        <button onClick={this.edit.bind(this,i)}>edit</button>
        <div key={todo.id}  className="item">
          {todo.Value}
          <span className="destroy" onClick={this.remove.bind(this, i)}>X</span>

        </div>
      </div>
    </li>
  );
};

remove(i){
  this.state.todo.splice(i,1)
  this.setState({todo:this.state.todo})
};
todoCompleted(i){
   var todo=this.state.todo;
   todo[i].checked =todo[i].checked? false:true;
     this.setState({
       todo:this.state.todo
     });

 };
allCompleted=()=>{
  var todo = this.state.todo;
  var _this = this
  todo.forEach(function(item) {
    item.className = _this.state.finished ? "newtodo" : "line"
    item.checked = !_this.state.finished
  })
  this.setState({todo: todo, finished: !this.state.finished})
};
edit(i){
  var todo= this.state.todo
  this.setState({
    editing:true
  });
};
save(i){
  this.setState({
    editing:false
  });
};
  rendernormal() {
  return (
      <div>
        <h1 id='heading'>todos</h1>
        <div className="lines"></div>
        <div>
          <input type="text" ref= "inputodo" onKeyPress={this.entertodo.bind(this)}className="inputodo"placeholder='todos'/>
          <span onClick={this.allCompleted}id="all">^</span>

        </div>
        <div className="mainapp">
          <ul className="decor">
            {this.state.todo.map(this.todo.bind(this))}
          </ul>
        </div>
      </div>
    );
  };
  renderform(todo,i) {
  return (
    <div>
      <h1 id='heading'>todos</h1>
      <div className="lines"></div>
      <div>
        <input type="text" ref= "inputodo" value={this.props.todo} placeholder='EDIT TODO'/>
        <span onClick={this.allCompleted}id="all">^</span>
        <button onClick={this.save.bind(this)}>save</button>
      </div>
      <div className="mainapp">
        <ul className="decor">
          {this.state.todo.map(this.todo.bind(this))}
        </ul>
      </div>
    </div>
    );
  };
  render(){
    if (this.state.editing) {
      return this.renderform()
    }
    else {
    return this.rendernormal()
    }
  };
}
 

ReactDOM.render(<App/>,document.getElementById('app'));

    .line {
  text-decoration: line-through;
  color: red;
}
.newtodo{
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

Answer 1

您可以将“当前值”存储在组件状态中，并将其传递给表单的输入。切换编辑模式时，只需更新状态值。尝试：

注意：

我使用了一种“hacky”方式从状态克隆objets数组以获得不变性。您最好使用更高级的工具，例如this。

    class App extends React.Component {

  

constructor(){
  super();
  this.state={
    todo:[],
    editing:false,
    value: '',
    current: null, 
  };
};

entertodo(keypress){
  var Todo=this.refs.inputodo.value;
  if( keypress.charCode == 13 )

  {
    this.setState({
      todo: this.state.todo.concat({Value:Todo, checked:false})
    });
    this.refs.inputodo.value=null;
  };
};
todo(todo,i){
  return (
    <li className={todo.checked===true? 'line':'newtodo'}>
      <div onClick={this.todoCompleted.bind(this, i)}>
        <input type="checkbox" className="option-input checkbox" checked={todo.checked} />
        <button onClick={this.edit.bind(this,i)}>edit</button>
        <div key={todo.id}  className="item">
          {todo.Value}
          <span className="destroy" onClick={this.remove.bind(this, i)}>X</span>

        </div>
      </div>
    </li>
  );
};

remove(i){
  this.state.todo.splice(i,1)
  this.setState({todo:this.state.todo})
};
todoCompleted(i){
   var todo=this.state.todo;
   todo[i].checked =todo[i].checked? false:true;
     this.setState({
       todo:this.state.todo
     });

 };
allCompleted=()=>{
  var todo = this.state.todo;
  var _this = this
  todo.forEach(function(item) {
    item.className = _this.state.finished ? "newtodo" : "line"
    item.checked = !_this.state.finished
  })
  this.setState({todo: todo, finished: !this.state.finished})
};
changeValue(e) {
  this.setState({
    value: this.state.value = e.target.value
  });
} 
edit(i){
  var todo= this.state.todo
  this.setState({
    editing:true,
    value: this.state.todo[i].Value,
    current: i
  });
};
save(i){
  var clonedTodo = JSON.parse(JSON.stringify(this.state.todo));
  clonedTodo[this.state.current].Value = this.state.value;
  this.setState({
    editing:false,
    todo: clonedTodo
  });
};
  rendernormal() {
  return (
      <div>
        <h1 id='heading'>todos</h1>
        <div className="lines"></div>
        <div>
          <input type="text" ref= "inputodo" onKeyPress={this.entertodo.bind(this)}className="inputodo"placeholder='todos'/>
          <span onClick={this.allCompleted}id="all">^</span>

        </div>
        <div className="mainapp">
          <ul className="decor">
            {this.state.todo.map(this.todo.bind(this))}
          </ul>
        </div>
      </div>
    );
  };
  renderform(todo,i) {
  return (
    <div>
      <h1 id='heading'>todos</h1>
      <div className="lines"></div>
      <div>
        <input type="text" onChange={this.changeValue.bind(this)} ref="inputodo" value={this.state.value} placeholder='EDIT TODO'/>
        <span onClick={this.allCompleted}id="all">^</span>
        <button onClick={this.save.bind(this)}>save</button>
      </div>
      <div className="mainapp">
        <ul className="decor">
          {this.state.todo.map(this.todo.bind(this))}
        </ul>
      </div>
    </div>
    );
  };
  render(){
    if (this.state.editing) {
      return this.renderform()
    }
    else {
    return this.rendernormal()
    }
  };
}
 

ReactDOM.render(<App/>,document.getElementById('app'));

    .line {
  text-decoration: line-through;
  color: red;
}
.newtodo{
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>