javascript - 从输入文本中获取数字，然后在单击按钮时递增 ReactJS

Question

我正在尝试使按钮增加输入文本值。

按钮增加或减少值。 (值 = '+' 或 '-')
(见下图)

获取此输入文本的值，然后使用我们刚刚获取的值和+1

我需要一个使用 reactjs 的完整示例。

Answer 1

使您的输入元素成为受控元素，当您单击按钮时，您只需要根据单击的按钮更新状态

您可以在 controlled vs uncontrolled Inputs 上阅读此答案

样本片段

class App extends React.Component {
 state = {
    count: 0
 }
 
 updateValue = (val) => {
     this.setState(prevState => ({count: prevState.count + val}));
 }
 render() {
    return  <div>
        <input type="number" value={this.state.count} />
        <input type="button" onClick={this.updateValue.bind(this, -1)} value="Decrement"/>
        <input type="button" onClick={this.updateValue.bind(this, 1)} value="Increment"/>
     </div>
 }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
<div id="app"/>