Javascript 具体化输入，不触发React中的onChange？

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

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

---

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

看起来您在帖子中直接使用了materialize，但是如果可能的话，您可以尝试使用它，因为它包装了所有materialize组件，这样更易于与React一起使用。使用

react-materialize

可能是处理状态和事件更改的最干净的方法，因为它们为每个materialize组件提供了一个方便的包装器

当使用

react materialize

中的日期选择器时，需要将

handleChange

方法传递到选项属性中，如下所示：

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

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

从中可以看出，在初始化时，您还必须传回一些选项，以便在选择日期时处理回调函数

我添加了一个JSFIDLE，下面有一个工作示例和一个代码段，请注意，当您选择一个日期时，“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>
    )
  }
}

类日期选择器扩展了React.Component{
建造师（道具）{
超级（道具）
}
手册更改（日期）{
console.log（'hello world'，date）；
}
componentDidMount（）{
var elems=document.querySelectorAll（'.datepicker'）；
var instances=M.Datepicker.init（elems{
onSelect:this.handleChange
});
}
render（）{
返回(
)
}
}

---

因此，要回答如何处理事件和设置状态的问题，您只需将

handleChange

方法传递到提供的选项配置中，具体取决于您使用materialize日期选择器的方式。关于与表单的集成，您可以使用其他回调挂钩（如onClose）进行表单验证。

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

---

如果显示问题部分的代码来自 呈现的html树，则需要在 任务本身

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

---

• 在MaterializeCss文档中没有提到onChange事件，这意味着无法直接获得它

---

---

我敢肯定，如果您将它放在您的组件didmount组件中，这就解决了警告问题。 如果要在状态更改时重新呈现select，那么也应该将其放入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)

---

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

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

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

---

当您关闭日期选择器（实际上是一个模式）时，onChange将触发，在本例中，将“onChange triggered”记录到控制台。

这是我的解决方案。我使用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>
  );
}

import React，{useffect，useState，useRef}来自“React”；
从“物化css”导入M；
导出默认函数App（）{
const fromref=useRef（null）；//创建引用
const[date，setDate]=useState（{fromdate:}）；
const{fromdate}=日期；
useffect（（）=>{
让elem=document.queryselectoral（“.datepicker”）；
M.Datepicker.init（元素{
第一天：没错，
格式：“yyyy-mm-dd”，
onClose:function（）{//onClose-datepicker时，我们可以通过ref获取值和数据
日志（fromref.current.name，fromref.current.value）；
setDate（{[fromref.current.name]：fromref.current.value}）；
}
});
}, []);
返回(
);
}

在组件更新（）上使用道具id

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

---

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

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

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

---

如果您使用的是ES6，您是否尝试过将其绑定到函数，例如：onChange={this.props.handleChange.bind（this）}@Vikramaditya很遗憾，我没有使用ES6，但我会尝试找到一种通用的JS方法。谢谢。@Vikramaditya我收到这个错误

React组件方法只能绑定到组件实例

…我遇到了同样的问题。onChange只是没有使用Materialize为此日期选择器触发。不过，对于普通字段，它工作得很好，我缺少什么？亲爱的@j_d，请使用以下函数测试

onChange

，

onChange={function（e）{console.log（e.target.value）}

，如果它在控制台上显示所选日期，那么您应该将

handleChange

函数放在您的问题中。问题可能来自

handleChange

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

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