javascript - 如何将当前输入值作为参数传递给绑定？

Question

I want to get input tag value in UserInput when I click button and change value of p tag in UserOutput. I used this.state.input but is not working. It works when I use input change event instead of click.

class App extends Component {

  state = {
    input: 'initial'
  };

  setUserInputHandler = (value) => {
    this.setState({
      input: value
    });
    console.log('Value is', value);
  }


  render() {
    return (
      <div className="App">
        <UserInput
          click={this.setUserInputHandler.bind(this, this.state.input)}
        />
        <UserOutput username={this.state.input} />
        <UserOutput username={this.state.input} />
      </div>
    );
  }
}

const userInput = (props) => {
    return (
        <div className='UserInput'>
            <input
                type='text' />
            <button onClick={props.click}>Set</button>
        </div>
    );
}

const userOutput = (props) => {
    return (
        <div>
            <p>{props.username}</p>
        </div>
    );
}

标签： javascriptreactjsonclick