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

【问题标题】：Get number from the input text and then increment when the button is clicked ReactJS从输入文本中获取数字，然后在单击按钮时递增 ReactJS
【发布时间】：2017-11-20 06:39:29
【问题描述】：

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

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

获取这个input text的值，然后使用我们刚刚得到的值和+1

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

【问题讨论】：

标签： javascript reactjs redux increment

【解决方案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"/>

【讨论】：