javascript - 为什么输入在 React 中没有返回任何内容?
问题描述
我是 React 的初学者,我正在尝试用它制作小应用程序。事实上,这是我在 React 中制作的第一个应用程序,但我遇到了一个问题。
我正在制作一个小应用程序,它将接受数字并加、减或乘以它们,即计算器。这是代码。
const { Component } = React;
class App extends React.Component {
state = {
num1: 0,
num2: 0,
answer: 0,
equation: "",
};
handleAdd1 = (number) => {
this.setState({ num1: number });
};
handleAdd2 = (number2) => {
this.setState({ num2: number2 });
};
handleClear = () => {
this.setState({ num1: 0, num2: 0, answer: 0 });
};
handlePlus = (sign) => {
switch (sign) {
case "+":
this.setState({ answer: this.state.num1 + this.state.num2 });
break;
case "-":
this.setState({ answer: this.state.num1 - this.state.num2 });
break;
case "x":
this.setState({ answer: this.state.num1 * this.state.num2 });
break;
}
};
handleInput = (event) => {
this.setState({ equation: event.target.value });
};
render() {
return (
<div>
<div>
<h1>{this.state.num1}</h1>
<button onClick={() => this.handleAdd1(1)}> 1 </button>
<button onClick={() => this.handleAdd1(2)}> 2 </button>
<button onClick={() => this.handleAdd1(3)}> 3 </button>
<button onClick={() => this.handleAdd1(4)}> 4 </button>
<button onClick={() => this.handleAdd1(5)}> 5 </button>
<button onClick={() => this.handleAdd1(6)}> 6 </button>
<button onClick={() => this.handleAdd1(7)}> 7 </button>
<button onClick={() => this.handleAdd1(8)}> 8 </button>
<button onClick={() => this.handleAdd1(9)}> 9 </button>
<button onClick={() => this.handleAdd1(0)}> 0 </button>
</div>
<div>
<h1>{this.state.num2}</h1>
<button onClick={() => this.handleAdd2(1)}> 1 </button>
<button onClick={() => this.handleAdd2(2)}> 2 </button>
<button onClick={() => this.handleAdd2(3)}> 3 </button>
<button onClick={() => this.handleAdd2(4)}> 4 </button>
<button onClick={() => this.handleAdd2(5)}> 5 </button>
<button onClick={() => this.handleAdd2(6)}> 6 </button>
<button onClick={() => this.handleAdd2(7)}> 7 </button>
<button onClick={() => this.handleAdd2(8)}> 8 </button>
<button onClick={() => this.handleAdd2(9)}> 9 </button>
<button onClick={() => this.handleAdd2(0)}> 0 </button>
</div>
<div>
<button onClick={() => this.handlePlus("+")}>+</button>
<button onClick={() => this.handlePlus("-")}>-</button>
<button onClick={() => this.handlePlus("x")}>x</button>
</div>
<div>
<button onClick={this.handleClear}>Clear</button>
<h1>{this.state.answer}</h1>
<input type="text"></input>
<button onClick={() => this.handleInput}>Enter !</button>
<button onClick={() => console.log(this.state.equation)}>
Log in console
</button>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
如果你查看程序,你会看到有几个数字,如果你点击它们并添加,你会得到一个 h1 的结果。但是,这并不是很好,因为您只能添加个位数。因此,如您所见,我添加了一个输入,它将采用等式并将其记录在控制台中(现在)。但可悲的是,这返回未定义。我能做些什么来解决这个问题吗?
解决方案
您需要使输入成为受控组件。您可以通过监听onChange
事件并将值传递给 value 属性来制作输入控制组件
<input type="text" value={this.state.equation} onChange={(e)=>this.setState({equation: e.target.value})}
现在你会得到方程
推荐阅读
- sql-server - 使用xml将不同行的数据连接到一列时如何删除空格?
- algorithm - 将大整数转换为不带模基的字符串的算法
- wildcard - 通配符搜索不适用于路径索引
- sql-server - Reading data from CSV File and Inserting it into Database
- python - PonyORM pytest error: RuntimeError: Request object lost db_session
- mysql - MySQL 三表连接与 sum
- reactjs - React Instant Search recover right data in function
- bash - 使用变量作为数组的名称并在 bash 中获取其元素之一
- java - Loop through n number of maps
- r - Error in file(out, "wt") : cannot open the connection while writing xlsx