Question

我们正在尝试向我们的一个自定义组件添加onChange处理程序 - 即Checkbox组件（它是自定义组件的唯一原因是我们可以有效地封装intermediate HTML属性）。它看起来像这样：

<Checkbox
  id="select-all"
  onChange={this.handleSelectAllChange(ids)}
  indeterminate={isIndeterminate}
  checked={areVisibleItemsSelected}
  disabled={isDisabled}
/>

处理程序函数的结构有点像这样：

handleSelectAllChange(ids) {
  // omitted code that filters on ids and produces newIds

  this.props.updateIds(newIds);
}

其中this.props.updateIds是一个修改父组件状态的传递函数。

问题是在页面加载期间调用此函数大约10次，这不是预期的。我以为只有在修改了实际的复选框元素时才调用它？

Answer 1

传递处理函数，如

<Checkbox
  id="select-all"
  onChange={this.handleSelectAllChange.bind(this,ids)}
  indeterminate={isIndeterminate}
  checked={areVisibleItemsSelected}
  disabled={isDisabled}
/>

Answer 2

通过声明它onChange={this.handleSelectAllChange(ids)}，方法调用在呈现CheckBox时立即发生。使用ES6，您可以使用

来避免这种情况

onChange={() => this.handleSelectAllChange(ids)}

这意味着您传递了一个新功能，在更改时会调用handleSelectAllChange。

Answer 3

我遇到了同样的问题......我能够解决阻止事件传播的问题。在onChange事件调用的函数中添加它：

e.stopPropagation();

Answer 4

您应该在元素本身内部定义onClick，并将指针传递给处理函数：

＆＃13;

function Checkbox(props) {
  return (<input type="checkbox" value={props.value} key={props.value} 
    onClick={props.clickHandler} />); // actual onclick
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      boxes: ['1', '2', '3'],
    }
  }
  
  handleSelectAllChange(box) {
    console.log(box)
  }
  
  render() {
    const boxes = this.state.boxes.map((b,i) => 
    	<Checkbox value={b} 
        clickHandler={this.handleSelectAllChange.bind(this, b)} // pass click handler
        key={i}/>
    );
    return (
      <div>
         {boxes}
      </div>
    );
  }
}

ReactDOM.render(<App/>, 
	document.querySelector('#app'));

＆＃13;

<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="app">Loading...</div>

＆＃13;

Answer 5

this.handleSelectAllChange(ids)表示调用该函数您应该将函数对象传递给事件处理程序。 e.g。()=>{this.handleSelectAllChange(ids)}

在页面加载期间多次调用React onChange处理程序

5 个答案: