实现输入时不会触发React中的onChange吗？

Question

我有一个Materialize输入，如下所示：

<input type="date" className="datepicker" onChange={this.props.handleChange} />

它已由Materialize正确初始化，但在日期选择器的值更改时不会触发onChange。我在这里做错了什么？这个问题似乎扩展到所有实现输入。

Answer 1

看起来您在帖子中直接使用了 Materialize，但如果可能的话，您可以尝试使用它，react-materialize因为它包装了所有 Materialize 组件，这样更容易与 React 一起使用。使用react-materialize可能是处理状态和事件更改的最干净的方法，因为它们为每个物化组件提供了一个方便的包装器。

使用 中的日期选择器时react-materialize，您需要将该handleChange方法传递到 options 属性中，如下所示：

<DatePicker
  options={{
    ...,
    onSelect: this.props.handleChange
  }}
 />

在独立使用具体化日期选择器的情况下，如果您可以提供有关如何初始化日期选择器输入的更多详细信息，我可以提供更相关的答案。但我会在黑暗中试一试。

从具体化文档来看，当您初始化它以在选择日期时处理回调函数时，您还必须传回一些选项。

我添加了一个 JSFiddle，它有一个工作示例以及下面的代码片段，请注意，当您选择日期时，“hello world”会记录在控制台中，并且该日期是传递到回调中的第一个参数。

class Datepicker extends React.Component {
  constructor(props) {
    super(props)
  }

  handleChange(date) {
    console.log('hello world', date);
  }

  componentDidMount() {
      var elems = document.querySelectorAll('.datepicker');
      var instances = M.Datepicker.init(elems, {
        onSelect: this.handleChange
      });
  }

  render() {
    return (
        <div>
          <input type="text" className="datepicker" />
        </div>
    )
  }
}

活生生的例子小提琴

因此，要回答如何处理事件和设置状态的问题，您只需handleChange根据您使用具体化日期选择器的方式将方法传递到提供的选项配置中即可。关于与表单集成，您可以使用其他回调挂钩（例如 onClose）来进行表单验证。