Как отправить состояние из дочернего хука в родительское состояние

Question

У меня есть выпадающий список, из которого я пытаюсь получить состояние и передать его в родительский контейнер. У меня много проблем, пытающихся решить эту проблему. Это мой код ниже:

this.state = {
  title: null,
  postBody: null,
  giphyUrl: null,
  userIdto: null,

  displayGifPicker: false
}

Выше указано состояние, я хочу ввести значение, которое выпадающий список дает в UserIdto

    getUserTo = (selectedUser) => {
  console.log(selectedUser)
  this.setState({ userIdto : selectedUser});
}

Метод передается в компонент какреквизит

<NameDropDown onChange={this.getUserTo}/> 

И в родительском компоненте у меня есть следующее:

class PostBox extends Component {



constructor(props){
    super(props)
    this.state = {
      title: null,
      postBody: null,
      giphyUrl: null,
      userIdto: null,

      displayGifPicker: false
    }
  }

  handleSubmit = (event) => {
    event.preventDefault()
    event.target.reset();
    const data = this.state
    //data.title if you want single item, this will help when sending req to db
    console.log("Final Output is: ", data)

    fetch('/posts/add', { 
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify ({
          title: data.title,
          postBody: data.postBody,
           giphyUrl: data.giphyUrl,
           approved: 1,
           postPicture: 'myurl.com',
              userId: 1,
              userIdto: 2
        })
      })
      .then(function(response) {
        return response.json()
        console.log(data.postBody)
      }).then(function(body) {
        console.log(body);
      });
  }

  handleInputChange = (event) => {
    console.log(event.target.name)
    console.log(event.target.value)
    this.setState({
      [event.target.name]: event.target.value
    })
  }

  displayGifPicker = () => {
    this.setState({
      displayGifPicker: !this.state.displayGifPicker
    })
}

getGifState = (selectedUrl) => {
  this.setState({ giphyUrl: selectedUrl})
}

getUserTo = (selectedUser) => {
  console.log(selectedUser)
  this.setState({ userIdto : selectedUser});
}

//  getUserTo = (name) => (event) => {
//   console.log(event.target.value)
//   this.setState({ userIdto: event.target.value });

// };

  render () {
    const {title, postBody} = this.state
    const displayGifPicker = this.state.displayGifPicker
    return (
      <Grid item xl={8}>
     {/* <Card className={classes.card} style={mt4}>  */}
     <Card style={mt4}> 
      <CardContent >
          <NameDropDown onChange={this.getUserTo}/> 
          <PostInput onChange={this.handleInputChange} onSubmit={this.handleSubmit}/>
          {displayGifPicker ? (<AddGif selectedGif = {this.getGifState} />) : (<Button size="small" onClick={this.displayGifPicker} ><button>Add Gif</button></Button>)}
        <CardActions>
        {/* <Button size="small">Submit VH5</Button> */}
        </CardActions>
      </CardContent>
    </Card>
  </Grid>
    )
  }
}

export default PostBox;

Я бы хотел после выбора значения в дочернем компоненте для его отправки в состояниеродительский компонент в userIdTo.

Это дочерняя функция

    export default function NameDropDown({onChange}) {
  const classes = useStyles();
  const [state, setState] = React.useState({
    open: false,
    name: '',
  });

  const handleChange = name => event => {
    setState({ ...state, [name]: event.target.value });
  };

  const handleClickOpen = () => {
    setState({ ...state, open: true });
  };

  const handleClose = () => {
    setState({ ...state, open: false });
  };

  return (
    <div>
      <Button onClick={handleClickOpen}>Select User To Send VH5</Button>
      <Dialog disableBackdropClick disableEscapeKeyDown open={state.open} onClose={handleClose}>
        <DialogTitle>Select a User</DialogTitle>
        <DialogContent>
          <form className={classes.container}>
            <FormControl className={classes.formControl}>
              <InputLabel htmlFor="age-simple">User</InputLabel>
              <Select
                value={state.name}
                onChange={onChange}
                onChange={handleChange('name')}
                input={<Input id="age-simple" />}
              >
                <MenuItem value="">
                  <em>None</em>
                </MenuItem>
                <MenuItem value={'Julio'}>Julio</MenuItem>
                <MenuItem value={'Corey'}>Corey</MenuItem>
                <MenuItem value={'Brenda'}>Brenda</MenuItem>
              </Select>
            </FormControl>
          </form>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleClose} color="primary">
            Ok
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

Answer 1

хорошо, что я получил от этого, так это то, что сначала у вас есть два прослушивателя события onChange на Select, просто имейте один onChange, который есть в вашем дочернем компоненте, как

<Select
  value={state.name}
  onChange={handleChange('name')}
  input={<Input id="age-simple" />}
 >

, чем внутри вашего вызова для изменения дескриптора onChange, переданного вреквизиты со значением

const handleChange = name => event => {
 setState({ ...state, [name]: event.target.value });
 onChange(event.target.value)
}

таким образом будет обновлено состояние ваших родителей

надеюсь, это поможет