React Todo Checkbox Стили всех перечисленных элементов сразу

abidishajia спросил: 03 февраля 2018 в 10:19 в: javascript

Я пытаюсь создать список дел с React. Я могу отображать список в области отображения, а также удалять элементы. Но когда я нажимаю на один флажок, все флажки выбираются, а класс применяется ко всем элементам списка. Я не уверен, что я делаю неправильно.

Я попытался использовать ту же логику, что и я, с удаленным элементом (который использует фильтр), но он не работает. Я посмотрел другие случаи здесь, но они в основном о том, как это сделать с помощью jQuery.

Вот рабочий пример моей проблемы.

Это класс List

class List extends Component {  state={
    check: false,
    strike: 'none'
  }  onCheck(item){
    this.setState({check: !this.state.check})
    if (this.state.strike === 'none'){
      this.setState({strike: 'line-through'})
    } else {
      this.setState({strike: 'none'})
    }
  }  render() {
    const strike = {
      textDecoration: this.state.strike,
    }  return (
    <ul className='list-style'>
      { this.props.items.map((item, index) =>
         <li key={index}>
           <div className="outer-div">
             <div className="item-checkbox">
               <input type="checkbox" checked={this.state.check}
                 onChange={() => this.onCheck(item)} />
              </div>
              <div className="item-text">
                 <span style= {strike}> {item} </span>
              </div>
              <div className="item-remove-div">
                <button className="item-remove" onClick={() => this.props.onDeleteList(index)}>
                  Remove
                </button>
              </div>
            </div>
             <br />
         </li>
       )}
    </ul>
  )}
}export default List;

И это основной класс:

class Main extends Component {  state = {
    items: [],
    term : "",
  } onChange(event){
   this.setState({ term: event });
 } onDelete= (item) =>{
   // this.setState ({
   //   items: this.state.items.filter((i) => i.index !== item.index)
   // })
   this.state.items.splice(item, 1);
   this.setState({items: this.state.items});
 }  onSubmit= (event) => {
    event.preventDefault();
    if (this.state.term.length > 0){
      this.setState({
        term: '',
        items: [...this.state.items, this.state.term]
      });
    }
  }  render() {
    return (
      <div className="center">
       <h1 className="header" > TODO-LIST </h1>
       <div className='mainCenter'>
        <form className="App" onSubmit={this.onSubmit}>
          <input placeholder="add task" value={this.state.term} onChange={(e) => this.onChange(e.target.value)}
          className="inputField"/>
          <button>Add to the List</button>
        </form>
        <List items={this.state.items}  onDeleteList={this.onDelete}/>
        <div className="footer-outer">
          <span className="footer"> Number of completed items in an array:  {this.state.items.length} </span>
        </div>
      </div>
    </div>
    );
  }
}

0 ответов