如何计算输入栏的内容?-ReactJS

Question

所以我有一个公式要应用于计算按钮，所以当单击时，它会通过我的函数运行输入数字并显示结果。我有输入栏和按钮，但我需要什么才能让按钮响应输入栏中的内容？

import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />

<form>
<label>
Total
<input type="text" name="name" />
</label>
<input type="submit" value="Calculate" />
</form>
</header>
</div>
);
}
export default App;

Answer 1

首先，对于任何输入，创建一个状态
然后，您可以使用<form>元素上的onSubmit属性来调用您的方法
要显示输入，只需使用状态即可。

例如，你可以在官方文档中找到它们，https://reactjs.org/docs/forms.html

class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {    this.setState({value: event.target.value});  }
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />        </label>
<input type="submit" value="Submit" />
</form>
);
}
}

功能组件

function NameForm(props) {
const [value, setValue] = useState("");

const handleChange = (e) => setValue(e.target.value);
const handleSubmit = (e) => {
e.preventDefault();
console.log("Form was submitted with input " + value);
};

return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" value={value} onChange={handleChange} />        
</label>
<input type="submit" value="Submit" />
</form>
)
}