Javascript 如何将当前输入值作为参数传递给react中的bind？

当我单击按钮并更改UserOutput中p标记的值时，我想在UserInput中获取输入标记值。 我使用了此.state.input，但不起作用。当我使用输入更改事件而不是单击时，它会起作用

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>
    );
  }
}

类应用程序扩展组件{
状态={
输入：'首字母'
};
SetUserInPuthHandler=（值）=>{
这是我的国家({
输入：值
});
console.log（'Value is'，Value）；
}
render（）{
返回(
);
}
}

constuserinput=（props）=>{
返回(
设置
);
}

constuseroutput=（props）=>{
返回(
{props.username}

);
}

这是否回答了您的问题？这回答了你的问题吗？

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>
    );
}