我有一个文本框,一个可单击的按钮和另一个不可单击的按钮,当单击可单击的按钮时,我用它来显示数字。我希望文本框中的值显示在另一个按钮中。 this.state正在更新,但未显示。
这是我第一次与React合作,请给我任何反馈。
class GameBoard extends React.Component {
render() {
return (
<div className="gameBoard">
<table>
<tbody>
<tr>
<th><input id="trips" className="inp"></input></th>
<th><button onClick={() => this.props.onClick("trips")}>place bet</button></th>
<th><button className="bettingSquere" >{this.props.game.trips}</button></th>
</tr>
</tbody>
</table>
</div>
);
}}
class App extends Component {
constructor(props) {
super(props);
this.state = {
trips: 0,
};
}
handleClick(type) {
var state = this.state;
state.trips=document.getElementById("trips").value;
this.state=state;
}
render() {
return (
<div align="center">
<GameBoard game={this.state} onClick={i => this.handleClick(i)} />
</div>
);
}
}
export default App;
答案 0 :(得分:1)
您应该再次阅读文档。不要像在handleClick
方法中那样直接更改或更改状态。您应该使用setState
方法来更新状态。另外,您不需要像这样更改输入值。您可以使用onChance
并在那里设置其他状态。
class GameBoard extends React.Component {
state = {
inputValue: null
};
handleInputChance = e =>
this.setState({
inputValue: e.target.value
});
handleClick = () => this.props.onClick(this.state.inputValue);
render() {
return (
<div className="gameBoard">
<table>
<tbody>
<tr>
<th>
<input
id="trips"
className="inp"
onChange={this.handleInputChance}
/>
</th>
<th>
<button onClick={this.handleClick}>place bet</button>
</th>
<th>
<button className="bettingSquere">{this.props.trips}</button>
</th>
</tr>
</tbody>
</table>
</div>
);
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
trips: 0
};
}
handleClick(type) {
this.setState({ trips: type });
}
render() {
return (
<div align="center">
<GameBoard
trips={this.state.trips}
onClick={i => this.handleClick(i)}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />
也许还有更多事情,例如明智地选择变量名。另外,您不需要传递整个状态(game: this.state
。只需传递您将需要的道具即可。即trips: this.state.trips
。