Я хочу получить значение тега ввода в UserInput, когда я нажимаю кнопку и изменяю значение тега p в UserOutput. Я использовал this.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>
);
}
}
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>
);
}