如何在 React.JS 或 html 中的选定开始日期之后限制开始日期之前的结束日期 input type=date""

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  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>

当您查看代码时，还有一些您应该考虑的其他更改。 只要没有选择开始日期，我就会 禁用 结束日期选择器，或者为开始结束日期设置合理的默认值（例如，今天），并在定义状态时设置这些值.

更重要的是：您应该将状态视为不可变的，这意味着每次状态更改时您都需要创建一个新对象，因为 React 只进行浅层比较。否则组件不会 re-render。所以使用 setAccount({...account, [name]: value}); 来更新你的状态。您需要在此处使用 []，以便将变量内容解释为 属性 的名称。参见 this thread。

您可能还想使用 <label>，也许 <legend>。请参阅 <fieldset>.

的 MDN 文档

有关控制日期选择器的更多选项，请参阅 <input type="date"> 的 MDN 文档。