如何将 DatePicker(@mui) 值提升到父组件？

Question

我刚开始研究ReactJS，想用DatePicker 写一个简单的应用程序。我的想法是使用 DatePicker 创建一个名为 DateTimeSelector（子组件）的组件，并调用 DateTimeSelector in App.js（父组件）多次（至少指定开始和结束日期）。

而且我坚持将状态从子组件提升到父组件。

这是我的代码：

1) DateTimeSelector（子）组件

...

export default function DateTimeSelector(props) {

    const [value, setValue] = React.useState(null);

    function onChangeHandler(newValue) {
        setValue(newValue);
        console.log(newValue);
    }

    return (
        <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DatePicker label={props.text}
          value={value}
          onChange={onChangeHandler}
          renderInput={(params) => <TextField {...params} />}
        />
      </LocalizationProvider>
    );

}

2) 主要（父）组件

在此组件中，我想在控制台中输出每个 DateTimeSelector 组件的值，例如，在 .

中打印这些值

现在在控制台中，我只能看到 DateTimeSelector 组件的值，但看不到父组件的值。

所以，我的问题是如何将日期值从 DatePickers 传递到父组件作为状态变量：startDate 和 endDate？

...

function App() {

  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);

  function startDateChangeHandler(value) {
      setStartDate(value);
      console.log(startDate);
  }

  function endDateChangeHandler(value) {
      setEndDate(value);
      console.log(endDate);
  }

  return (
    <Container>
      <Grid container spacing={2}>
      <Grid item xs={3}>
        <div>
          <DateTimeSelector text='Start Date' 
                            value={startDate}
                            onChange={startDateChangeHandler} />
        </div>
        <div>
          <DateTimeSelector text='End Date'
                            value={endDate}
                            onChange={endDateChangeHandler}/>
        </div>
      </Grid>
      <Grid item xs={9}>
        <div><p>Start Date: {startDate ?  JSON.stringify(startDate) : null}</p>
             <p>End Date: {endDate ?  JSON.stringify(endDate) : null}</p>
        </div>
      </Grid>
    </Grid>
     </Container>
  );
}

export default App;

Answer 1

子项中不需要状态。你可以参考这个code link

Answer 2

我找到了解决办法！感谢您建议不要在 Child 中设置状态！

DateTimeSelector（子）

export default function DateTimeSelector(props) {

    function onChangeHandler(date) {
        props.onChange(date);
    }

    return (
        <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DatePicker label={props.text}
          value={props.date}
          onChange={onChangeHandler}
          renderInput={(params) => <TextField {...params} />}
        />
      </LocalizationProvider>
    );

}

应用（父）

function App() {

  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);
  
  function startDateChangeHandler(date) {
      console.log('startDateChangeHandler');
      setStartDate(date);
      console.log(startDate);
  }

  function endDateChangeHandler(date) {
    console.log('endDateChangeHandler');
    setStartDate(date);
    console.log(endDate);
}

  return (
    <Container>
      <Grid container spacing={2}>
      <Grid item xs={3}>
        <div>
          <DateTimeSelector text='Start Date' 
                            date={startDate}
                            onChange={startDateChangeHandler} />
        </div>
        <div>
          <DateTimeSelector text='End Date'
                            date={endDate}
                            onChange={endDateChangeHandler}/>
        </div>
      </Grid>
      <Grid item xs={9}>
        <div>
          <p id='start_date'>Start Date: {startDate ?  JSON.stringify(startDate) : null}</p>
          <p id='end_date'>End Date: {endDate ?  JSON.stringify(endDate) : null}</p>
        </div>
      </Grid>
    </Grid>
     
     <Button variant="contained">Hello World!</Button>
     </Container>
  );
}

如何将 DatePicker(@mui) 值提升到父组件？

How to lift up DatePicker(@mui) value to a parent component?

reactjs

datepicker

components

parent-child