React中的材料化输入不会触发onChange事件？

Question

我有一个像这样的Materialize输入：

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

Materialize初始化正确，但日期选择器的值变化时没有触发onChange事件。我做错了什么？这个问题似乎适用于所有Materialize输入。

- j_d

---

你尝试将它绑定到函数上了吗？如果你正在使用ES6，例如：onChange={this.props.handleChange.bind(this)}; - Vikramaditya

@Vikramaditya 很抱歉，我没有使用ES6，不过会尝试找到一种CommonJS的方法。谢谢。 - j_d

@Vikramaditya 我遇到了这个错误 React组件方法只能绑定到组件实例... - j_d

我遇到了同样的问题。在使用Materialize日期选择器时，onChange根本不会触发。虽然对于普通字段它可以正常工作，但我错过了什么？ - born2gamble

亲爱的 @j_d，你测试我的意见了吗？我只是想帮助你。 - AmerllicA

Answer 1

在 componentDidUpdate() 使用一个名为 id 的属性

var elem = document.getElementById('date');
        M.Datepicker.init(elem,{
            onClose:()=>{
                this.state.date = elem.value;                    
                this.setState(this.state)
            }
        });

- Camilo Barbosa

Answer 2

这是我的解决方案。我使用 useRef 钩子来识别日期选择器输入，当 onClose 被触发时，我们可以通过 ref 变量捕获对象和数据值。

import React, { useEffect, useState, useRef } from "react";
import M from "materialize-css";

export default function App() {

  const fromref = useRef(null); //create reference

  const [date, setDate] = useState({ fromdate: "" });

  const { fromdate } = date;

  useEffect(() => {
    let elem = document.querySelectorAll(".datepicker");
    M.Datepicker.init(elem, {
      firstDay: true,
      format: "yyyy-mm-dd",
      onClose: function() { // when onclose datepicker, we can get the value and data through the ref
        console.log(fromref.current.name, fromref.current.value);
        setDate({ [fromref.current.name]: fromref.current.value });
      }
    });
  }, []);

  return (
    <form class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <input
            name="fromdate"
            type="text"
            class="datepicker"
            placeholder="from date"
            ref={fromref} //set reference to the input
          />
        </div>
      </div>
    </form>
  );
}

- AAlvarez

Answer 3

如果你想获取值或其他属性，你可以在初始化时从实例变量中访问它们，然后在提交表单之前进行检查。

var elems = document.querySelectorAll('.timepicker');
var instances = M.Timepicker.init(elems);

然后，在提交表单之前获取您的值，可以按照以下步骤进行：

var date = instances[0].el.value;

- Philipos D.

Answer 4

我非常确定，如果您将它放在componentDidMount组件中，这将解决警告问题。 如果选择要在状态更改时重新呈现，则应该将其放在componentDidUpdate中。

// find the select element by its ref
const el = ReactDOM.findDOMNode(this.refs.ref_to_my_select);
// initialize the select
$('select').material_select();
// register a method to fireup whenever the select changes
$(el).on('change', this.handleInputChange)

- Adil Saiyad

Answer 5

在Materialize中获取日期选择器的值时，可以在初始化组件时提供onSelect选项：

var instances = M.Datepicker.init(
      elems,
      {
        onSelect:function(){
          date = instances[0].date;
          console.log(date);
        }
      }
    );

https://codepen.io/doughballs/pen/dyopgpa

每次选择日期时，onSelect都会触发，在这种情况下，会将所选日期记录在控制台中。

当您关闭日期选择器（实际上是模态框）时，onChange就会触发，在这种情况下，会将“onChange已触发”记录在控制台中。

- Sean Doherty

Answer 6

有两件事可能会阻止预期行为的执行。

---

1. 如果您在问题部分显示的代码来自渲染的HTML树，则需要在分配本身时调用onchange赋值。

<input type="date" className="datepicker" onChange=this.props.handleChange(event)/>

• 注意：以前浏览器事件期望将事件回调处理程序作为字符串格式的值。

---

• 在MaterializeCss文档中没有提到onChange事件，这意味着没有直接的方法可以获取它。
• https://materializecss.com/pickers.html

---

- girijashankar_j

Answer 7

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

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

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

如果您独立使用Materialize日期选择器，请提供有关如何初始化日期选择器输入的更多详细信息，我可以提供更相关的答案。但是我会尝试一下。

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

我添加了一个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>
    )
  }
}

实时示例 Fiddle

所以，为了回答你关于如何处理事件和设置状态的问题，你只需要将你的 handleChange 方法传递到提供的选项配置中，具体取决于你如何使用 materialize 日期选择器。关于与表单集成，你可以使用其他回调钩子，比如 onClose 来进行表单验证。

- Sherman Hui