Javascript ReactJs Todo列表推送状态

我已经在reactjs中编写了todo列表的开始部分，并希望改进如何将todo添加到状态的功能。目前，我正在将输入的值浓缩到一个处于状态的数组中，然后剪接掉选定的li元素。当您添加第一个待办事项时，似乎有点问题。我应该使用reacts不变性助手来实现这一点吗？添加另一个可以在普通js中实现的东西似乎有些过分了

//Input component
const Input = props => {
  return (
    <div className="form-group">
      <input
        className="form-control"
        value={props.value}
        onChange={props.update}
        type="text"
      />
      <button className="btn btn-default" onClick={props.handleClick}>
        Add Todo
      </button>
    </div>
  );
};
//display list of todos
const Displaytodo = (props) => {
  const todolist = props.todo;
  const listItems = todolist.map((todo, index) =>
    <li
      className={
       props.highlight ? 'list-unstyled todoItem highlight' : 'list-unstyled todoItem '
      }
      key={index}>
      {todo}
      <div
        onClick={props.removeTodo.bind(this, index)}
        className="removeTodo">
        <i className="fa fa-trash" />
      </div>
      <div onClick={props.changeHighlight.bind(this,index)} className="checkTodo">
        <i className="fa fa-check-circle" onClick={props.highlight} />
      </div>
    </li>
  );

  return <ul className="todos">{listItems}</ul>;
};
//controlled state component
class Layout extends React.Component {
  constructor() {
    super();
    this.state = { text: "Hello", todo: [], highlight: false };
  }
  update(e) {
    this.setState({ text: e.target.value });
  }
  handleClick() {
    const text = this.state.text;
    if (text.length > 0) {
      this.setState(
        { todo: this.state.todo.concat(text), text: "", highlight: false },
        function() {
          console.log(this.state.todo);
        }
      );
    } else {
      alert("please enter something");
    }
  }
  removeTodo(e) {
    this.state.todo.splice(e, 1);
    this.setState({ todo: this.state.todo });
  }

  changeHighlight(index, e) {
    const highlight = this.state.highlight;

    this.setState(prevState => ({
      highlight: !prevState.highlight
    }));
  }

  render() {
    return (
      <div className="container">
        <div className="row">

          <div className="col-md-4 col-md-offset-4">
            <div className="wrapper">
              <h1>Todo List</h1>

              <Input
                value={this.state.text}
                update={this.update.bind(this)}
                handleClick={this.handleClick.bind(this)}
              />
              <Displaytodo
                removeTodo={this.removeTodo.bind(this)}
                todo={this.state.todo}
                changeHighlight={this.changeHighlight.bind(this)}
                highlight={this.state.highlight}
              />
            </div>

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

const app = document.getElementById("app");

ReactDOM.render(<Layout />, app);

//输入组件
常量输入=道具=>{
返回(
添加待办事项
);
};
//显示待办事项列表
const Displaytodo=（道具）=>{
const todolist=props.todo；
const listItems=todolist.map（（todo，index）=>

{todo}

);
return
{listItems}
；
};
//受控状态元件
类布局扩展了React.Component{
构造函数（）{
超级（）；
this.state={text:“Hello”，todo:[]，highlight:false}；
}
更新（e）{
this.setState（{text:e.target.value}）；
}
handleClick（）{
const text=this.state.text；
如果（text.length>0）{
这是我的国家(
{todo:this.state.todo.concat（text），text:，highlight:false}，
函数（）{
console.log（this.state.todo）；
}
);
}否则{
警惕（“请输入某物”）；
}
}
removeTodo（e）{
本状态todo拼接（e，1）；
this.setState（{todo:this.state.todo}）；
}
更改突出显示（索引，e）{
const highlight=this.state.highlight；
this.setState（prevState=>({
突出显示：！prevState.highlight
}));
}
render（）{
返回(
事項清單
);
}
}
const app=document.getElementById（“app”）；
ReactDOM.render（，app）；

此外，当用户单击绿色勾号时，它将通过关闭和打开类“highlight”来高亮显示行，但在控制台中，它会给出一个错误。哪些链接到

---

只需在

上单击

即可删除
onClick

至于突出显示每个
待办事项
，则有点复杂。您必须在每个
todo
上都有
id
，然后将
id
传递给
changelhighlight
功能。您必须从全局状态中删除突出显示，并在每个
todo
上指定一个
突出显示
布尔值。然后您必须相应地显示待办事项

对于
removeTodo
函数，您可以传入
id
以在父组件中删除它

以下是完整的代码：

const Input = props => {
  return (
    <div className="form-group">
      <input
        className="form-control"
        value={props.value}
        onChange={props.update}
        type="text"
      />
      <button className="btn btn-default" onClick={props.handleClick}>
        Add Todo
      </button>
    </div>
  );
};
const Displaytodo = (props) => {
  const changeHighlight = function(id) {
    props.changeHighlight(id);
  }

  const removeTodo = function(id) {
    props.removeTodo(id);
  }

  const todolist = props.todo;
  const listItems = todolist.map((todo, index) =>
    <li
      className={
       todo.highlight ? 'list-unstyled todoItem highlight' : 'list-unstyled todoItem '
      }
      key={todo.id}>
      {todo.text}
      <div
        onClick={removeTodo.bind(event, todo.id)}
        className="removeTodo">
        <i className="fa fa-trash" />
      </div>
      <div onClick={changeHighlight.bind(event, todo.id)} className="checkTodo">
        <i className="fa fa-check-circle" />
      </div>
    </li>
  );

  return <ul className="todos">{listItems}</ul>;
};
class Layout extends React.Component {
  constructor() {
    super();
    this.state = {text: "Hello", todo: []};
  }
  update(e) {
    this.setState({ text: e.target.value });
  }
  handleClick() {
    const text = this.state.text;
    if (text.length > 0) {
      this.setState(
        { todo: this.state.todo.concat({
          id: this.state.todo.length + 1,
          text: this.state.text,
          highlight: false
        }), text: ""},
        function() {
          console.log(this.state.todo);
        }
      );
    } else {
      alert("Please enter something");
    }
  }
  removeTodo(id) {
    let todos = this.state.todo;

    for (let i = 0; i < todos.length; i++) {
      let todo = todos[i];
      if (todo.id == id) {
        todos.splice(i, 1);
      }
    }

    this.setState({ todo: todos });
  }

  changeHighlight(id) {    
    let todos = this.state.todo;

    for (let i = 0; i < todos.length; i++) {
      let todo = todos[i];
      if (todo.id == id) {
        todos[i].highlight = !todos[i].highlight;
      }
    }

    this.setState({
      todo : todos
    });
  }

  render() {
    return (
      <div className="container">
        <div className="row">

          <div className="col-md-4 col-md-offset-4">
            <div className="wrapper">
              <h1>Todo List</h1>

              <Input
                value={this.state.text}
                update={this.update.bind(this)}
                handleClick={this.handleClick.bind(this)}
              />
              <Displaytodo
                removeTodo={this.removeTodo.bind(this)}
                todo={this.state.todo}
                changeHighlight={this.changeHighlight.bind(this)}
              />
            </div>

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

const app = document.getElementById("app");

ReactDOM.render(<Layout />, app);

const Input=props=>{
返回(
添加待办事项
);
};
const Displaytodo=（道具）=>{
const changehollight=函数（id）{
道具。更改突出显示（id）；
}
const removeTodo=函数（id）{
移除道具（id）；
}
const todolist=props.todo；
const listItems=todolist.map（（todo，index）=>

{todo.text}

);
return
{listItems}
；
};
类布局扩展了React.Component{
构造函数（）{
超级（）；
this.state={text:“Hello”，todo:[]}；
}
更新（e）{
this.setState（{text:e.target.value}）；
}
handleClick（）{
const text=this.state.text；
如果（text.length>0）{
这是我的国家(
{todo:this.state.todo.concat({
id:this.state.todo.length+1，
text:this.state.text，
推荐理由：错
})，文本：“}，
函数（）{
console.log（this.state.todo）；
}
);
}否则{
警惕（“请输入某物”）；
}
}
removeTodo（id）{
让todos=this.state.todo；
for（设i=0；i
谢谢Steve，我完全错过了我最初拥有它们的onclick！将突出显示移出全局状态非常有效，谢谢。没问题。如果解决了您的问题，请将答案标记为解决方案：）我已将您建议的更改应用到我的代码中，我还注意到我的拼接功能实际上是删除数组中的第一项而不是所选项。检查我的代码笔，例如，非常感谢任何帮助。。注：还没有代表投票：（编辑了我的答案：）你仍然可以点击复选标记将我的答案标记为正确答案！谢谢，在你发布这篇文章之前，我也是这么认为的，现在工作得很好。