Question

我只是想知道在React中更新状态。我正在研究基本的“待办事项”。我创建了一个列表＆amp;为每个元素映射。用户可以在列表中添加新元素，并可以更改元素的状态。

现在，我希望状态能够针对每次点击进行更新。例如，当用户单击完成的按钮时，调用状态列表将仅包含已完成的项目。我能做到。但是在我更新列表后，我无法访问默认列表。例如，当用户单击按钮时;

changeView(event) {
let clickStatus = event.target.value
if (clickStatus = 'completed') {
const newList = this.state.list.filter((item) => {
return item.completed
})
this.setState({
this.state.list: newList
})
}

但在此之后，我无法访问包含每个项目的列表。

这是我的代码：

class App extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      list: [
        {
          'text': 'First Item',
          'completed': false
        },
        {
          'text': 'Second Item',
          'completed': false
        },
        {
          'text': 'Third Item',
          'completed': true
        }
      ]
    }
    this.handleStatus = this.handleStatus.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleSubmit(event) {
    event.preventDefault()
    const newItem = {
      'text': this.refs.new.value,
      'completed': false
    }
    this.setState({
      list: this.state.list.concat([newItem])
    })
    this.refs.new.value = ''
  }

  handleStatus(event) {
    const itemText = this.state.list[event.target.value].text
    const itemStatus = this.state.list[event.target.value].completed
    const newItem = {
      'text': itemText,
      'completed': itemStatus ? false : true
    }
    const list = this.state.list
    list[event.target.value] = newItem
    this.setState({
      list
    })
  }

  render() {

    const Item = this.state.list.map((item, index) => {
      return <li onClick={this.handleStatus} className={(item.completed) ? 'done' : 'default'} value={index} status={item.completed}>{item.text}</li>
    })

    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input type='text' ref='new'></input>
          <button type='submit'>Add</button>
        </form>
        <ul>
          {Item}
        </ul>
        <div>
          <button
            value='all'
            type='submit'>All
          </button>
          <button
            value='completed'
            type='submit'>Completed
          </button>
          <button
            value='pending'
            type='submit'>Pending
          </button>
        </div>
      </div>
    )
  }
}

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

Answer 1

不是在每个过滤器上更新状态列表，而是使用state属性来决定在渲染过程中应显示哪些项目状态应始终存储整个列表，您应该只设置指示completed过滤器处于活动状态的状态属性：

changeView(event) {
    let clickStatus = event.target.value
    this.setState({
        completedFilter: clickStatus === 'completed' ? true : false
    })
}

然后使用此属性过滤渲染方法中显示的项目：

render() {
    let fileredItems = this.state.list;
    if (this.state.completedFilter) {
        fileredItems = this.state.list.filter((item) => item.completed);
    }
    return (
        ...
        {
            filteredItems.map((item) => {
                //return item node
            })
        }
    );

}

如何过滤数组＆amp;每次点击React时都会更新状态

1 个答案: