物化輸入不會觸發 React 中的 onChange？

Question

我有一個 Materialize 輸入，如下所示：

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

它由 Materialise 正確初始化，但在日期選擇器的值更改時不會觸發 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

為了在實現中獲取 datepicker 的值，它們在初始化組件時提供了一個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 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

在componentDidUpdate() 上使用 prop id

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

有兩件事可能會阻止預期行為的執行。

---

1. 如果您顯示問題部分的代碼來自渲染的 html 樹，則需要在分配時調用 onchnage 分配。

 <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可能是處理狀態和事件更改的最干凈的方法，因為它們為每個 materialize 組件提供了一個方便的包裝器。

使用react-materialize的日期選擇器時，您需要將handleChange方法傳遞到 options 道具中，如下所示：

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

在獨立使用具體化日期選擇器的情況下，如果您可以提供有關如何初始化日期選擇器輸入的更多詳細信息，我可以提供更相關的答案。 但我會在黑暗中試一試。

從具體化文檔看來，當您初始化它以在選擇日期時處理回調函數時，您還必須傳回一些選項。

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

現場示例小提琴

因此，要回答關於如何處理事件和設置狀態的問題，您只需要根據您使用具體化日期選擇器的方式將handleChange方法傳遞到提供的選項配置中。 關於與表單集成，您可以使用其他回調鈎子（如 onClose）來進行表單驗證。