将值传递给父组件的日期组件反应打字稿

Question

我想在子组件上创建日期组件并在屏幕上（在父组件上）显示 selected 日期。另外我还有两个问题：

我无法让组件相互通信。我可以在控制台上打印来自子组件的答案，但我无法传递给父组件
当我 select 在我的下拉列表中设置日期“自定义”时，我想 select 一个开始和结束日期，但我做不到，当我 select 其中一个日期（开始或结束）另一个自动更新。

欢迎任何帮助:)

这是我的codesandbox：https://codesandbox.io/s/date-picker-forked-h1u9s?file=/src/App.tsx

这就是我调用日期组件的方式

  export default function App() {
  return (
    <div>
      <DateComponent />
      <div>Your chosen date was: </div>
    </div>
  );
}

这是日期组件：

return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <div className="App">
        <div>
          <ReactSelect
            value={selectedOption as ValueType<OptionType>}
            onChange={(option) => handleChange(option)}
            isMulti={false}
            options={options}
          />

          {selectedOption === DateValueEnum.Custom ? (
            <div style={{ display: "flex" }}>
              <div style={{ width: "50%", float: "left", paddingRight: "5px" }}>
                <DatePicker
                  fullWidth
                  margin="normal"
                  required={true}
                  error={false}
                  invalidLabel={"Several values..."}
                  value={selectedDate}
                  onChange={(newDate) => setSelectedDate(newDate)}
                  format="MM/dd/yyyy"
                />
              </div>
              <DatePicker
                fullWidth
                margin="normal"
                required={true}
                error={false}
                invalidLabel={"Several values..."}
                value={selectedDate}
                onChange={(newDate) => setSelectedDate(newDate)}
                format="MM/dd/yyyy"
              />
            </div>
          ) : null}
        </div>
      </div>
    </MuiPickersUtilsProvider>
  );
};

Answer 1

您可以在组件之间共享状态或函数。有很多方法可以做到

您可以直接从父组件向子组件共享状态，在共享状态之前您需要使用 React useState 钩子创建一个

像这样：

 const [date, setDate] = useState("")
 
<DateComponent setDate={setDate} />

这里我们将setDate函数传给了children组件。当我们在 DateComponent 中调用该函数时，我们将更改 Parrent 组件的状态

 props.setDate("date")

了解状态和生命周期here，它会对你有很大帮助。另请阅读关于 hooks，这是以前使用的。

另一种在组件之间传递数据的方法是useContext它是更复杂的方法，或者你可以使用像 Redux、Mobx 这样的库。

关于“自定义”选项，您只为两个选项创建了一种状态，所以当您选择日期时，两者都会发生变化。要修复它，您需要添加第二个状态。

这里是固定版本：sandbox

将值传递给父组件的日期组件反应打字稿

Date component passing the value to parent component react typescript

datepicker

typescript

reactjs

use-state