Question

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

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

正在通过Materialize正确初始化，但是当datepicker的值更改时不会触发onChange。我在这做错了什么？此问题似乎扩展到所有Materialise输入。

Answer 1

如果将它放在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 2

要在实现中获取日期选择器的值，他们在初始化组件时提供了一个onSelect选项：

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

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

每次选择一个日期时，onSelect都会触发，在这种情况下为console。记录所选日期。

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

Answer 3

那是我的解决方案。我使用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 4

使用道具 id

在 componentDidUpdate（）上

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

Answer 5

如果要获取值或其他属性，则可以在初始化时从 instaces 变量访问它们，然后在进行检查之前提交表格。

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

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

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

Answer 6

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

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

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

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

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

Answer 7

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

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

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

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

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

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

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）进行表单验证。

物化输入不会在React中触发onChange？

7 个答案: