Реакция JS: метод setState компонента-прародителя не обновляет состояние поля ввода внука при щелчке по событию - PullRequest
Новая
       4

Реакция JS: метод setState компонента-прародителя не обновляет состояние поля ввода внука при щелчке по событию

1 голос
/ 14 января 2020

В том же коде я смог получить метод setState компонента бабушки и дедушки для соответствующего обновления для события onClick из компонента внука, однако для события onChange это не удалось. Я не получаю никаких ошибок. 

class GrandChild extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  changeNumber=()=> {
    this.props.changeNumber();//call child method
  }

   handleChange(e) {
     this.props.onChange(e.target.value);
  }
  render() {
    const data = this.props.data;
    return(
      <div>
        <h1>The number is {this.props.number}</h1>
        <input type="text" value = {data} onChange={this.handleChange} />
        <button onClick={this.changeNumber}>Increase number by 1</button>
      </div>
    )
  }
}

class Child extends React.Component {

  render() {
    return(
      <div>
        <GrandChild number={this.props.number} changeNumber={this.props.changeNumber} value={this.props.data} onChange={this.props.handleChange}/>
      </div>
    )
  }
}

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      number: 1,
      data: ""
    }
    this.handleChange = this.handleChange.bind(this);
  }
    handleChange(data) {
    this.setState({data:this.state.data});
      console.log(data);
  }  
  changeNumber=()=>{


    this.setState((prevState)=>{
      console.log(prevState,this.state.data);
      return {
        number :  prevState.number + 1
      }
    });
  }
  render() {
    const data = this.state.data;
    const input = data;
    return (
      <Child number={this.state.number} 
             changeNumber = {this.changeNumber} 
             data={input} 
             onChange = {this.handleChange}
      />
    );
  }
}

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

Результат консоли: Объект {data: "", number: 1} ""

снимок экрана результата: console.log результат

см. Кодовое перо для прямого кода: https://codepen.io/codehorse/pen/yLyEwBw?editors=0011

1 Ответ

1 голос
/ 14 января 2020

Ваш улучшенный код с живой демо https://codesandbox.io/s/laughing-sky-kk97b

Что нужно изменить <GrandChild number={this.props.number} changeNumber={this.props.changeNumber} value={this.props.data} onChange={this.props.onChange}/>

Полный код 

class GrandChild extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  changeNumber = () => {
    this.props.changeNumber(); //call child method
  };

  handleChange(e) {
    this.props.onChange(e.target.value);
  }
  render() {
    const data = this.props.data;
    return (
      <div>
        <h1>The number is {this.props.number}</h1>
        <input type="text" value={data} onChange={this.props.onChange} />
        <button onClick={this.changeNumber}>Increase number by 1</button>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <div>
        <GrandChild
          number={this.props.number}
          changeNumber={this.props.changeNumber}
          value={this.props.data}
          onChange={this.props.onChange}
        />
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 1,
      data: ""
    };
  }
  handleChange = e => {
    this.setState({ data: e.target.value });
    console.log(e.target.value);
  };
  changeNumber = () => {
    this.setState(prevState => {
      console.log(prevState, this.state.data);
      return {
        number: prevState.number + 1
      };
    });
  };
  render() {
    const data = this.state.data;
    const input = data;
    return (
      <Child
        number={this.state.number}
        changeNumber={this.changeNumber}
        data={input}
        onChange={this.handleChange}
      />
    );
  }
}

export default App;
...