Question

我是javascript和reactjs的新手。因此，我能得到的任何帮助将不胜感激。

我在render方法中有两个日期字段（开始日期和结束日期）。如何访问这些日期文件的值并验证结束日期在开始日期之后。

我无法弄清楚如何访问日期字段的值。这是我的代码：

const renderDates= (value) =>
 {
    //Do something
 }
  return
  {
    <React.Fragment>
       <Field
          component = {Datepicker}
           name = "sdate"
            id = "date 1"
             label = "sdate"
             onChage = {handleDate1}
        />
        <Field
          component = {Datepicker}
           name = "edate"
            id = "date 2"
             label = "edate"
             onChage = {handleDate2}
        />
    </React.Fragment>

   };

let handleDate1 = (value) =>
{
    //Access sdate 
};

 let handleDate2 = (value) =>
{
    //Access edate 
};

问：但是我该如何比较sdate和edate的值？

谢谢

Answer 1

反应数据流允许您将数据从父组件传递到子组件。您可以使用回调将数据从子组件发送到父组件。

我们可以使用状态和受控组件来管理父组件中的状态并比较值。

因此，在您的情况下，您可以通过以下方式解决您的问题：

class MyComponent extends React.Component {
  state={svalue: new Date(), evalue: new Date() }

  componentDidUpdate() {
    if (this.state.svalue.getTime() === this.state.evalue.getTime()) {
      // they are equal
    }
  }
  renderDates = (value) =>
   {
    //Do something
    return
    {
      <React.Fragment>
         <Field
            component = {Datepicker}
            value={this.state.svalue}
            name = "sdate"
            id = "date 1"
            label = "sdate"
            onChage = {handleDate1}
          />
          <Field
            component = {Datepicker}
            value={this.state.evalue}
            name = "edate"
            id = "date 2"
            label = "edate"
            onChage = {handleDate2}
          />
      </React.Fragment>

     };

  handleDate1 = (value) => {
      this.setState({svalue: value});
  };

  handleDate2 = (value) => {
      this.setState({evalue: value});
  };

}

您可以在https://reactjs.org/docs/forms.html#controlled-components

上了解更多有关受控组件的信息。

React JS：如何比较两个不同字段的值

1 个答案: