代码之家 › 专栏 › 技术社区 › yevg

reactjs-checkbox onchange事件未触发

react-dom checkboxlist data-binding reactjs javascript

yevg · 技术社区 · 6 年前

我正试图在react中实现一组由对象呈现的复选框组成的字段,如下所示:

constructor() {

    this.state.todo = {
        eat: true,
        sleep: false,
        react: true
    }

    this.toggleCheckbox = this.toggleCheckbox.bind(this);
}

toggleCheckbox(e){

    console.log(e); // nothing :-/
}

render() {

    return (
    <div>
    { Object.keys(this.state.todo).map((val, i) => (          
        <div key={i} >
            <input 
                type="checkbox" 
                value={val} 
                onChange={this.toggleCheckbox} 
                checked={this.state.todo[val]} 
                /><label>{val}</label>
        </div>
     ))}
     </div>
    )
}

所有渲染都正确,但我无法更改任何复选框。控制台记录 toggleCheck() 事件未被触发。

我试过用 onClick VS onChange 没有效果。

1 回复 | 直到 6 年前

Tholle 6 年前

你正在从 this.state.tables ,但你的州被称为 this.state.todo .

您可以将每个值用作 name 而是切换相关的 todo 国家财产。

例子

class App extends React.Component {
  state = {
    todo: {
      eat: true,
      sleep: false,
      react: true
    }
  };

  toggleCheckbox = e => {
    const { name } = e.target;
    this.setState(prevState => ({
      todo: {
        ...prevState.todo,
        [name]: !prevState.todo[name]
      }
    }));
  };

  render() {
    return (
      <div>
        {Object.keys(this.state.todo).map((val, i) => (
          <div key={i}>
            <input
              type="checkbox"
              name={val}
              onChange={this.toggleCheckbox}
              checked={this.state.todo[val]}
            />
            <label>{val}</label>
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

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

<div id="root"></div>

推荐文章

Miquel Al. Vicens · 反应不改变输入值

2 年前

sander · 如何在reactjs中渲染到两个不同的网格?

7 年前

user7232873 · registerServiceWorker在React JS中做什么?

7 年前

Aleskei Sakharov · react dom 16.1中缺少ReactInputSelection

7 年前

Tavem · Render中的“Uncaught TypeError:React.createClass不是函数”。js文件(electron app)

7 年前

Nitin Bisht · 如何在reactjs中呈现JSON数据?

7 年前

Tierna D. Jack Lawless · 尝试构建时出现“无法从“…/react-konva/src/react-konva.js”中解析模块“react/lib/react”

7 年前

idude · CDN与React的网页包

7 年前

Nitesh Rana · 未定义ReactDom?

7 年前

Collybus · Reactjs Uncaught错误:元素类型无效:应为字符串

7 年前