Przekazując dane z dziecka do składnika rodzicielskiego za pomocą funkcji zwrotnej, ale jakoś nie działa. Co tu robię źle? Przekazanie danych z dziecka do składnika rodzicielskiego - reaguj - za pośrednictwem funkcji zwrotnej

https://codepen.io/silentarrow/pen/gemqep?editors=0010.

I oto kod

class App extends React.Component{
    constructor(props){
      super(props);
      this.state={
        input:'this is the input for now'
      }
   //this.handleInput=this.handleInput.bind(this);   
    }

    handleInput(x){
      this.setState({
        input:x
      });
      alert(this.state.input);
    }

  render(){
    return(
      <div>
        <h1>Passing props from Child to Parent Component</h1>
        <Child getInput={this.handleInput} />
        here's the input: {this.state.input}
        </div>
    );
  }
 }

class Child extends React.Component{
  constructor(){
    super();
    this.state={
      text:''
        }
    }
  passingProps(e){
    var newInput=e.target.value;
    //alert(newInput);
   this.setState({
     text:newInput
    });
  this.props.getInput(this.state.text);
  }

  render(){
    return(
      <div>
      <input type="text" placeholder="please input a name..." onChange={this.passingProps} />

        </div>

    )
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('app')
);
8
faraz 26 czerwiec 2017, 09:22

6 odpowiedzi

Najlepsza odpowiedź

Jest kilka problemów.

1) Musisz wiązać passingProps

constructor(){
    super();
    this.state={
      text:''
    }
    this.passingProps = this.passingProps.bind(this);
}

2) this.setState jest asynchroniczny, więc nie jest zagwarantowany, że this.state.text zostanie ustawiona na wartość, którą chcesz, aby przekazuje go do this.props.getInput. Możesz albo zrobić

this.props.getInput(newInput)

Lub

this.setState({ text: newInput }, () => {
  this.props.getInput(this.state.text);
})

Rozwiązać ten problem.

5
DonovanM 26 czerwiec 2017, 06:38

Możesz utworzyć metodę w rodzica, który akceptuje niektóre dane, a następnie ustawia otrzymane dane jako stan macierzysty. Następnie przekazuj tę metodę dziecku jako rekwizyty. Teraz pozwól, aby metoda zaakceptować stan dziecka jako wejściowy, a następnie pozwolić, aby metoda ustawiła otrzymane państwo dziecięce jako stan macierzysty.

Passing Child State to Parent

1
Community 20 czerwiec 2020, 09:12

Dwie rzeczy, które musisz je poprawić:

  1. Jeśli chcesz uzyskać dostęp do nowego stanu, nie używasz this.state.input this.setState({input: 'xxx'}). Oto powód, dla którego nie jest to.
  2. this.passingProps = this.passingProps.bind(this) jest zdefiniowany, co this jest aktualnym zakresem. Po użyciu this w funkcji komponentu, this należy powiązać.

Zmieniono Codepen

1
Todd Mark 26 czerwiec 2017, 06:44

this nie jest automatycznie związany w funkcji passingprops. Spróbuj strzałkować składnię funkcji, aby go wiązać.

passingProps = e => {
  var newInput=e.target.value;
  //alert(newInput);
  this.setState({
    text:newInput
  });
  this.props.getInput(this.state.text);
}
1
genestd 26 czerwiec 2017, 06:36

W komponencie Child, napisałeś następujący kod:

passingProps(e){
  var newInput=e.target.value;
  //alert(newInput);
  this.setState({
     text:newInput
  });
  this.props.getInput(this.state.text);
}

Problem jest spowodowany jako zachowanie asynchroniczne funkcji setstate. Oznacza to, że nie możesz nazwać Setstate w jednej linii i oczekiwać aktualizacji w następnej linii. Użyj funkcji Callback of Setstate, aby zadzwonić do funkcji składnika rodzicielskiego tak, jak:

passingProps(e){
  var newInput=e.target.value;
  //alert(newInput);
  this.setState({ text: newInput }, () => {
     this.props.getInput(this.state.text);
  })
}

To samo dzieje się w rasienicę Funkcja komponentu aplikacji.

1
Ritesh Bansal 26 czerwiec 2017, 06:34
class App extends React.Component{
constructor(props){
  super(props);
  this.state={
    input:'this is the input for now'
  }
  this.handleInput=this.handleInput.bind(this);   
}

handleInput(event){
  let value = event.target.value;
  this.setState({
    input:value
  });
}

render(){
   return(
     <div>
       <h1>{this.state.input}</h1>
       <Child getInput={this.handleInput} />
     </div>
   );
  }
}

 class Child extends React.Component{
   constructor(){
      super(props);
}

render(){
   return(
     <div>
     <input type="text" placeholder="please input a name..." onChange={this.props.getInput} />
    </div>

     )
   }
}

ReactDOM.render(
  <App/>,
  document.getElementById('app')
);

Oto odpowiedź na twoje pytanie. Mam nadzieję, że twój problem został rozwiązany.

2
Vasi 26 czerwiec 2017, 06:33