使用React进行Javascript初始化

Question

大家好，我现在正在为我的项目使用Materialise和React库。我真的想使用他们的日期选择器，必须使用以下javascript进行初始化。

<link href="/manatelpa/app.bb10406340c613a712e4.css" rel="stylesheet">

其中html由：

表示

$('.datepicker').pickadate({
   selectMonths: true, // Creates a dropdown to control month
   selectYears: 15 // Creates a dropdown of 15 years to control year
});

http://materializecss.com/forms.html

我如何将其纳入我的React项目中。我似乎无法弄清楚从哪里开始。谢谢！

Answer 1

jQuery适用于DOM。它找到一个元素，对它做一些肮脏的技巧，因此一个简单的input元素变成了一个带有一些DOM事件监听器的小树。

React通过呈现从组件构建DOM。为了使组件变成DOM元素，React 将此组件安装到DOM树中的某个点。安装组件后，可以通过旧的良好DOM API访问它，例如document.getElementById等。

React组件可以具有componentDidMount属性，该属性是在组件安装后执行的函数，因此保证它存在于DOM树中。

连接点，您需要在componentDidMount中使用jQuery内容，如下所示：

class MyComponent extends Component {
  componentDidMount() {
    $('.datepicker').pickadate({
      selectMonths: true, // Creates a dropdown to control month
      selectYears: 15 // Creates a dropdown of 15 years to control year
    });
  }

  render() {
    return (
      <input
        className="datepicker"
        onChange={event => console.log('Just changed!', event.target.value)} />
    );
  }
}

但更好的做法是通过其引用来引用某个DOM元素（请参阅the documentation），因此代码看起来像

class MyComponent extends Component {
  constructor() {
    super();
  }

  componentDidMount() {
    const node = this.input;

    $(node).pickadate({
      selectMonths: true, // Creates a dropdown to control month
      selectYears: 15 // Creates a dropdown of 15 years to control year
    });
  }

  render() {
    return (
      <input
        className="datepicker"
        ref={node => {
          this.input = node;
        }}
        onChange={event => console.log('Just changed!', event.target.value)} />
    );
  }
}

在React中，DOM是次要的，只能从组件状态和props表示的底层数据中呈现。用户界面响应数据更新reactively，这就是为什么你还需要处理更新这些数据的原因，但它超出了这个问题的范围并且完全可以进行谷歌处理。