在 React 中实现输入不会触发 onChange？

Question

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

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

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

Answer 1

在 componentDidUpdate() 上使用道具 id

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

Answer 2

如果您将它放在您的 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)

Answer 3

为了在具体化中获取日期选择器的值，他们在初始化组件时提供了onSelect 选项：

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

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

每次选择日期时，onSelect 都会触发，在本例中为 console.logging 所选日期。

当您关闭日期选择器（实际上是一个模式）时，即触发 onChange，在这种情况下将“触发的 onChange”记录到控制台。

Answer 4

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

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

Answer 5

如果您想获取 value 或其他 属性，您可以在初始化时从 instaces 变量中访问它们，然后检查 before提交您的表单。

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

然后为了在提交表单之前获得您的价值，可以执行以下操作：

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

Answer 6

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

---

1. 如果您显示的问题部分的代码来自 渲染 html 树，然后需要调用 onchnage 分配 while 作业本身。

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

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

---

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

---

Answer 7

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

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

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

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

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

我添加了一个 JSFiddle，它有一个工作示例以及下面的代码 sn-p，请注意，当您选择一个日期时，控制台会记录“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>
    )
  }
}

Live Example Fiddle

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