复选框切换反应

Question

在我的应用程序中，单击列表项或复选框时会调用函数“todoCompleted”。当我单击复选框时，代码运行不正确。该函数用于 li 元素和复选框字段。

    class App extends React.Component {

  

          constructor(){
      super();
      this.state={
        todo:[]
      };
    };

    entertodo(keypress){
      var Todo=this.refs.inputodo.value;
      if( keypress.charCode == 13 )

      {
        this.setState({
          todo: this.state.todo.concat({Value:Todo, checked:false})

        });
        this.refs.inputodo.value=null;
      };
    };
    todo(todo,i){
      return (
        <li className={todo.checked===true? 'line':'newtodo'}>
          <div onClick={this.todoCompleted.bind(this,i)}>
            <input type="checkbox" className="option-input checkbox" checked={todo.checked} />
            <div key={todo.id}  className="item">
              {todo.Value}
              <div className="Button">
              <span className="destroy" onClick={this.remove.bind(this, i)}>X</span>
              </div>
            </div>
          </div>
        </li>
      );
    };

    remove(i){
      this.state.todo.splice(i,1)
      this.setState({todo:this.state.todo})
    };
    todoCompleted(i){
       var todo=this.state.todo;
       {
         todo[i].checked =true;
         this.setState({
           todo:this.state.todo
         });
       }
     };
    allCompleted=()=>{
      var todo = this.state.todo;
      var _this = this
      todo.forEach(function(item) {
       item.className = _this.state.finished ? "newtodo" : "line"
       item.checked = !_this.state.finished
   })
   this.setState({todo: todo, finished: !this.state.finished})
    };

      render() {
      return (
          <div>
            <h1 id='heading'>todos</h1>
            <div className="lines"></div>
              <div>
                <input type="text" ref= "inputodo" onKeyPress={this.entertodo.bind(this)}className="inputodo"placeholder='todos'/>
                <span onClick={this.allCompleted}id="all">x</span>
              </div>
              <div className="mainapp">
                <ul>
                {this.state.todo.map(this.todo.bind(this))}
                </ul>
              </div>
          </div>
        );
      }
    }
      

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

    .line {
  text-decoration: line-through;
  color: red;
}
.newtodo{
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

Answer 1

看起来您的 this.todoCompleted 在这里触发了两次（简化了您的 html）：

<li onClick={this.todoCompleted.bind(this,i)}>
    <input type="checkbox" onChange={this.todoCompleted.bind(this,i)} checked={text.checked} />
</li>

首先，li 上的那个被解雇了。它将复选框设置为正确的状态。但是随后，实际复选框上的那个被触发了！并将 todo 设置回未选中状态。所以看起来它不起作用:)

如果您将复选框移出 li 元素，就像我在这里所做的那样：http://www.webpackbin.com/Nk9NTh0RZ

Answer 2

当您单击input 元素时，todoCompleted 方法被调用了 2 次。每个 li 元素也绑定 3 次：在 li、input 和 button 上单击。作为快速修复，您可以通过以下方式重新格式化 li 元素的结构：

在这里演示：http://codepen.io/PiotrBerebecki/pen/bwmwqz

      <li className={text.Decor}>
        <div onClick={this.todoCompleted.bind(this,i)}>
          <input type="checkbox"
                 className="option-input checkbox"
                 checked={text.checked} />
          <div key={text.id}
               className="item">
            {text.Value}
          </div>
        </div>
        <button type="button"
                className="destroy"
                onClick={this.remove.bind(this,i)}>
          X
        </button>
      </li>

请注意

• 新的 div 结构，
• i 现在被传递给 remove 方法，而且
• todoCompleted 方法只绑定一次。出于性能原因，在渲染 JSX 时应避免使用绑定或箭头函数。这是因为为 map() 函数生成的每个实例创建了事件处理函数的副本。这在这里解释：https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

你也一直在改变状态：

  remove(i){
    this.state.todo.splice(i,1)
    this.setState({todo:this.state.todo})
  };

您可以：

  remove(i){
    this.setState({
      todo: [
        ...this.state.todo.slice(0, i),
        ...this.state.todo.slice(i + 1)
      ]
    });
  };

Answer 3

如何在 Reactjs 中切换多个复选框

const [cardChacked, setcardChacked] = useState(false);

const onInput = (e) => {
    const { value } = e.target;

    setInput({ CompanyInput: value });

    setCheckedItems(false);
  };

 <input
    onChange={onInput}
    className={
        checkedItems === "noti_6" &&
        cardChacked === true &&
        CompanyInput !== ""
            ? "label-active"
            : ""
    }
/>