Question

我正在尝试使用setState将输入值从一个孩子传递给另一个孩子。它呈现第一个元素，而不是第一个子元素中的第二个元素。

class App extends Component { 
    constructor(props) {
        super(props);
        this.state = {};
    }; 

    showTekst = () => {
        const inpValue = document.querySelector('.inpValue').value;
        this.setState({
            name: 'Bruce Wayne',
            namefromvalue: inpValue.value
        });
    } 

    render() {
        return (
            <div className="app">
                <Button showTekst={this.showTekst.bind(this)} />
                <Text name={this.state.name} namefromvalue={this.state.namefromvalue}/> 
                <Inputvalue /> 
            </div>
        );
    } 
}

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

class Inputvalue extends Component {
    render() {
        return (
            <input className="inpValue"></input>
        );
    }
}

class Text extends Component {
    render() {
        return (   
            <div>
                <h1>This is text..</h1>
                <h2>{this.props.namefromvalue}</h2>
                <p>{this.props.name}</p>
            </div>
        );
    }
}

Answer 1

如果仅在单击Inputvalue组件时才想在Text组件中显示来自Button组件的文本，则可以将输入值存储在App中实例，并在单击App时更新Button状态。

为此，我们在onChange组件中定义了一个Inputvalue道具，以便每次输入文本更改时，都会使用新值调用该道具。使用该道具，我们可以更新App实例中的值。此值将始终与输入值同步。

最后，当单击按钮时，我们用输入值更新App状态，以便Text组件呈现其值。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};

    // This variable will hold the input value.
    this.inputValue = "";
  }

  showTekst = () => {
    // Update with the current input value.
    this.setState({
      name: "Bruce Wayne",
      namefromvalue: this.inputValue
    });
  };

  onInputChange = value => {
    // Update the input value.
    this.inputValue = value;
  };

  render() {
    return (
      <div className="app">
        <Button showTekst={this.showTekst.bind(this)} />
        <Text name={this.state.name} namefromvalue={this.state.namefromvalue} />
        <Inputvalue onChange={this.onInputChange} />
      </div>
    );
  }
}

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

class Button extends Component {
  render() {
    return <button onClick={this.props.showTekst}>Show text</button>;
  }
}

class Inputvalue extends Component {
  render() {
    return (
      <input
        className="inpValue"
        onChange={ev => this.props.onChange(ev.target.value)}
      />
    );
  }
}

class Text extends Component {
  render() {
    return (
      <div>
        <h1>This is text..</h1>
        <h2>{this.props.namefromvalue}</h2>
        <p>{this.props.name}</p>
      </div>
    );
  }
}

通过父级将输入值传递给同级

1 个答案: