代码之家 › 专栏 › 技术社区 › Maria

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

parent-child components datepicker reactjs

Maria · 技术社区 · 2 年前

我刚刚开始学习ReactJS,想用DatePicker编写一个简单的应用程序。我的想法是创建一个名为, 日期时间选择器 ( 子组件 ),和DatePicker,以及打电话 日期时间选择器 应用程序内。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组件的值,例如,在中打印这些值。

现在在控制台中,我只看到我的组件,但不是来自父级。

所以,我的问题是如何将日期值作为状态变量从日期选择器传递到父组件: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;

0 回复 | 直到 2 年前

Sooraj s 2 年前

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

Maria 2 年前

我找到了解决办法!感谢您的建议,不要在孩子身上出现状态!

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>
  );
}