编辑列表中的项目

Question

我正在使用react js和语义用户界面库创建待办事项应用程序。

尽管添加和删除功能运行良好，但我仍坚持使用编辑功能。以下是代码片段。

App.js

class App extends Component{
  constructor(props){
    super(props);

    this.state={
        item :'',

        listItems:[

        ],

    }

    this.handleChangeItem = this.handleChangeItem.bind(this);

  }

updateItem=(key,item)=>{
    const newlistItems = [...this.state.listItems]
    newlistItems.map(list=>{
      if(list.key===key){
        list.item = item;
      }
    }
      )

      this.setState({
        listItems:newlistItems
      })
  }

ListView.js

 <List.Content>

                     { 
                     this.props.listItems.map((item, index) => <List.Header key={index}   > 
                        <span>
                            <input 
                            size="50%"
                             id={index}
                             value={item} 
                             onChange={(event)=>{this.props.updateItem(event.target.value,index)}}
                             />
 </List.Content>

我正在父组件中实现edit函数，并在List View Component的输入字段中为onChange方法调用它。我无法在视图组件中编辑输入字段的值。有人可以帮我解决这个问题吗？

Answer 1

问题出在您的updateItem功能上。您可以将setState与回调一起使用，以访问您的状态的先前状态。

尝试以下操作：

updateItem = (key, item) => {
    this.setState(prevState => {
       ...prevState,
       listItems: prevState.listItems.map(list => {
          if(list.key === key){
             list.item = item;
          }

          return list;
       })
    })
}

我希望这会有所帮助！