Question

所以有一个输入字段：

<input
  id={itemId}
  onChange={handleChange}
  type="number"
  value={packed}
/>

这是我的onChange函数：

  handleChange(e) {
    const { items, onUpdateQuantity } = this.props;
    const updateItem = items.filter((item) =>
      item.itemId === e.target.id,
    );

    const itemQuantity = toNumber(e.target.value);
    updateItem.total += itemQuantity;
    onUpdateQuantity(e.target.id, itemQuantity);
  }

那么为什么React仍然抱怨onChange处理程序在它已经定义时没有被定义？我不想添加defaultValue道具，因为这会导致我的应用中的错误。有什么想法吗？

Answer 1

即将到来，因为value在任何地方都没有变化。从docs for controlled components可以看出，input的值为this.state.value，onChange方法通过更改input来更改this.state.value内的值}。

据我所知，当您在input（<input/>）元素中输入值时，该元素的值不会改变。始终是packed的价值。这就是你收到错误的原因。

Answer 2

确保在构造函数

中绑定函数

class bla extends Component {
    constructor(props){
     super(props);
     this.handleChange = this.handleChange.bind(this);
    }
  }

或者如果使用阶段0让你以这种方式拥有你的功能。

handleChange = () => {}

如果不是

 handleChange () {
     return (e) => {};
    }

此外，如果你使用类组件，你应该用 this.handleChange 调用 handleChange ，如果你把它传递给功能组件那么你应该没问题

Answer 3

https://reactjs.org/docs/handling-events.html

在JSX回调中你必须要小心这个含义。在JavaScript中，默认情况下不会绑定类方法。如果你忘记绑定this.handleClick并将其传递给onClick，那么在实际调用该函数时这将是未定义的。

这不是特定于React的行为;它是JavaScript中函数如何工作的一部分。通常，如果您在其后引用没有（）的方法，例如onClick = {this.handleClick}，则应绑定该方法。

不要忘记在JSX中使用this.handleChange

示例：

    class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

如何在实际定义处理程序时删除与使用`value` prop而不使用`onChange`处理程序的表单字段相关的ReactJS警告？

3 个答案: