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

Question

我试图使按钮增加输入文本值。

按钮递增或递减值。 （value = '+' OR '-'）
（见下图）

要获取此input text的值，然后使用我们刚刚获得的值+1

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

Answer 1

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

您可以在 controlled vs uncontrolled Inputs

上阅读此答案

示例代码段

＆＃13;

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

＆＃13;

＆＃13;