Reactjs 这就是在react中创建项目符号数组的方法吗

我试图理解将数组中的每个项作为li元素输入的最佳方法

我感到困惑，因为似乎有更好的方法，或者说，尽管在运行代码时它仍然有效，但实现可能并不正确

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
输入值：“”，
inputValue2:“”，
待办事项：[]，
}
}
handleInputChange（e）{
this.setState（{inputValue:e.target.value}）
}
地图列表（）{
返回这个.state.todo.map（x=>
{x}
）；
}
handleAddToDo=（）=>{
这是我的国家({
todo:[…this.state.todo，this.state.inputValue]
})
console.log（this.state.todo）；
this.setState（{inputValue:''}）
这个.mapList（）；
}
render（）{
返回(


this.handleInputChange（e）}
/>
this.handleAddToDo（）}>
添加到待办事项列表
{this.mapList（）}
)
}
}

你几乎做对了。这是我的尝试。我只是删除了一些不必要的部分，并使所有功能箭头的一个

您不必在诸如onChange或onClick之类的JSX道具中调用函数，只需使用函数引用即可。实际上，总是这样使用它。因此，并非在每次渲染中都创建函数

您不需要在handleAddTodo中调用此.mapList（），因为在状态更改后，组件将重新呈现，mapList将再次运行

class App extends React.Component {
  state = {
      inputValue: '',
      todo: [],
      id: 0,
    }

  handleInputChange = (e) =>
    this.setState({ inputValue: e.target.value })


  toggleCompleted = ( e ) => {
    // We are caching event values since SyntheticEvent
    // cannot be used asynchronously.
    const checked = e.target.checked;
    const id = e.target.id;

    // We are mapping todos, finding related one with id
    // then change its completed status to our checked value.
    this.setState( prevState => ( {
      todo: prevState.todo.map(
        el => {
          if ( el.id === Number( id )) {
            return { ...el, completed: checked}
          }
          return el;
        }
        )
    }))
  }

  mapList = () =>
    this.state.todo.map(x => (
      <Fragment key={x.id}>
        <li>{x.value}</li>
        <input type="checkbox" checked={x.completed} id={x.id} onChange={this.toggleCompleted}/>
      </Fragment>
    ))

completedList = () => this.state.todo
    .filter( el => el.completed )
    .map( el => (
      <Fragment key={el.id}>
        <li>{el.value}</li>
        <input type="checkbox" checked={el.completed} id={el.id} onChange={this.toggleCompleted} />
      </Fragment>
    ))

  // We change our todo shape here. Array of objects and it holds
  // value, and mimic an id. 
  handleAddToDo = () =>
    this.setState( prevState => (
      { todo: [...prevState.todo, { value: prevState.inputValue, completed: false, id: prevState.id + 1 }], inputValue: "", id: prevState.id + 1 }
    ))

  render() {
    console.log( this.state.todo );
    return (
      <div>
        <br />
        <input type="text"
          value={this.state.inputValue}
          onChange={this.handleInputChange}
        />
        <button onClick={this.handleAddToDo}>Add to To-Do list</button>
        <ol>
          {this.mapList()}
        </ol>
        <p>Completed Todos</p>
        <ul>
          {this.completedList()}
        </ul>
      </div>

    )
  }
}

类应用程序扩展了React.Component{
状态={
输入值：“”，
待办事项：[]，
id:0，
}
handleInputChange=（e）=>
this.setState（{inputValue:e.target.value}）
切换完成=（e）=>{
//我们正在缓存自事件发生以来的事件值
//不能异步使用。
const checked=e.target.checked；
const id=e.target.id；
//我们正在映射TODO，查找id为的相关TODO
//然后将其完成状态更改为选中值。
this.setState（prevState=>）{
todo:prevState.todo.map(
el=>{
如果（el.id==编号（id））{
返回{…el，已完成：已选中}
}
返回el；
}
)
}))
}
地图列表=（）=>
this.state.todo.map（x=>(
{x.value}
))
completedList=（）=>this.state.todo
.filter（el=>el.completed）
.map（el=>(
{el.value}
))
//我们在这里改变我们的待办事项形状。对象数组和它保持不变
//值，并模拟一个id。
handleAddToDo=（）=>
this.setState（prevState=>(
{todo:[…prevState.todo，{value:prevState.inputValue，已完成：false，id:prevState.id+1}]，inputValue:，id:prevState.id+1}
))
render（）{
console.log（this.state.todo）；
返回(


添加到待办事项列表
{this.mapList（）}
完成待办事项


{this.completedList（）}

)
}
}

感谢您的快速回复！还有一件事我根本不知道怎么做，我做了很多搜索。如果我想在每个项目的

中添加一个复选框，如果选中该复选框，将把数组中的特定元素移动到一个新数组中，用于完成待办事项，该怎么办？我对JSX和Javascript与HTML的混合感到困惑。我对Javascript和HTML非常了解，但混合是令人困惑的：）可能您希望保存todo数据，而不仅仅是一个数组，而是数组的对象和一些属性，如

completed

。然后，以某种方式将复选框绑定到todo，然后更改完成的道具。我不知道如何告诉绑定部分，因为我不太擅长html、表单和输入：）顺便说一句，我编辑了一些小问题的答案。你不应该在同一个地方多次设置状态，你可以一次完成所有状态的更改（handleAddTodo）。唷，不是很优雅，但它可以工作：）我已经编辑了我的答案并添加了复选框。只是模仿用ID和值创建todo并更改其状态。谢谢！我想我现在明白多了。虽然在您的代码中，我不明白这是做什么的：handleAddToDo=（）=>this.setState（prevState=>（{todo:[…prevState.todo，{value:prevState.inputValue，completed:false，id:prevState.id+1}），inputValue:，id:prevState.id+1}）所以，我现在也不知道如何返回已完成项目的数组。像这样的

completedList=（）=>this.state.todo.filter（x=>（this.state.todo.id.completed==true））