如何限制在react.js或html输入类型中选定的启动日期之后开始日期之前的结束日期= date; quot;

Question

function App() {
  let [account, setAccount] = React.useState({
    startdate: "",
    enddate: "",
    reason: "",
    leavetype: "",
  });

  function handleChange(e) {
    let name = e.target.name;
    let value = e.target.value;
    account[name] = value;
    setAccount(account);
  }
  function Submit(e) {
    e.preventDefault();
    console.log(account);
  }
  return (
    <div>
      <fieldset>
        <form className="" method="post" onSubmit={Submit}>
          Start Date:
          <input
            type="date"
            name="startdate"
            min={new Date().toISOString().split("T")[0]}
            onChange={handleChange}
            required
          />
          End Date:
          <input
            type="date"
            name="enddate"
            // min={}
            onChange={handleChange}
            required
          />
        </form>
      </fieldset>
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

您需要使用所拥有的状态。

function App() {
  const [account, setAccount] = React.useState({
    startdate: "",
    enddate: "",
    reason: "",
    leavetype: "",
  });

  function handleChange(e) {
    const name = e.target.name;
    const value = e.target.value;
    // treat state as immutable!
    // you need to creaet a new object here
    // See https://stackoverflow.com/a/25333702/17487348 for how to create a property from a string in ES6
    setAccount({...account, [name]: value});
  }
  function Submit(e) {
    e.preventDefault();
    console.log(account);
  }
  return (
    <div>
      <fieldset>
        <form className="" method="post" onSubmit={Submit}>
          <legend>Your trip</legend>
          <label for="startdate">Start Date:</label>
          <input
            type="date"
            name="startdate"
            min={new Date().toISOString().split("T")[0]}
            onChange={handleChange}
            required
          />
          <label for="enddate">End Date:</label>
          <input
            type="date"
            name="enddate"
            disabled={account.startdate === "" ? true: false}
            min={account.startdate ? new Date(account.startdate).toISOString().split("T")[0]: ""}
            onChange={handleChange}
            required
          />
        </form>
      </fieldset>
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

当您查看代码时，您还应考虑其他一些更改。
只要没有选择的启动日期或设置开始结束日期的明智默认值（例如，今天两者都设置这些默认值），我将 disable 。

更重要的是：您应该将状态视为不变的，这意味着您需要每当国家随着反应而变化时都需要创建一个新对象。否则该组件将不会重新渲染。因此，请使用 setAccount（{...帐户，[名称]：value}）; 更新状态。您需要在此处使用 [] ，因此变量内容被解释为属性的名称。参见此线程。

您可能还想使用＆lt; label＆gt; ，也许是＆lt; legend＆gt; 。请参阅 ＆gt; field;代码> 。

有关控制datepicker的更多选项，请参见” noreferrer“> <代码>＆lt;输入类型=“ date”＆gt; 。