Materialize输入未触发React中的onChange吗？

Question

bounty到期在7天内。该问题的答案有资格获得+ 50声望赏金。gen希望对此问题引起更多关注：“将materialize.css日期/时间选择器合并为反应形式的最佳方法是什么？您如何处理事件，以及如何更新状态？”

我有一个Materialize输入，例如：

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

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

Answer 1

似乎您在帖子中直接使用了物化，但是如果可能的话，您可以尝试使用react-materialize，因为它包装了所有物化组件，因此更易于在React中使用。使用react-materialize可能是处理状态和事件更改的最简洁方法，因为它们为每个实现组件提供了方便的包装。

使用react-materialize中的日期选择器时，您需要像这样将react-materialize方法传递到选项prop中：

handleChange

如果单独使用实现日期选择器，则可以提供有关如何初始化日期选择器输入的更多详细信息，我可以提供更相关的答案。但我会在黑暗中试一试。

从

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

看来，当您选择日期时，初始化它来处理回调函数时，您还必须传递一些选项。

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

materialize docs

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>
    )
  }
}

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