我怎样才能显示结果，现在在下面的代码中我只将它导出到控制台，但我想要它在浏览器中的一个段落或其他标记。 我知道这是一个愚蠢的问题（也许），但我对react是新手。
null
import React, { Component, useState, useEffect } from 'react';
class App extends React.Component{
constructor(props){
super(props)
this.state = {
input: 0
}
}
handleChange(e){
this.setState({input: e.target.value})
}
handleSubmit(e){
e.preventDefault()
let value = eval(this.state.input)
console.log(value)
}
render(){
return(
<div>
<form onSubmit={(e) => this.handleSubmit(e)}>
<input type="text " onChange={(e) => this.handleChange(e)}/>
<button>Send</button>
</form>
</div>
)
}
}
export default App;null
将value设置为状态。 然后使用this.state.value访问它
null
import React, { Component, useState, useEffect } from 'react';
class App extends React.Component{
constructor(props){
super(props)
this.state = {
input: 0,
value: "",
}
}
handleChange(e){
this.setState({input: e.target.value})
}
handleSubmit(e){
e.preventDefault()
let value = eval(this.state.input)
this.setState({value});
}
render(){
return(
<div>
<form onSubmit={(e) => this.handleSubmit(e)}>
<input type="text " onChange={(e) => this.handleChange(e)}/>
<button>Send</button>
</form>
<p>{this.state.value}</p>
</div>
)
}
}
export default App;
我看得出你在使用useState钩子。 如何设置一个状态，它将在提交表单时更新？
在函数中调用const[value，setValue]=useState()，然后在submit函数中调用setValue(value)
从那里，您可以访问值状态并将其呈现在组件中的任何位置。 请注意，您应该只在功能组件内部使用钩子。
嗨，这里是一个工作演示，告诉你如何做你想做的事情:
null
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
input: 0
}
}
handleChange(e) {
this.setState({
input: e.target.value
})
}
handleSubmit(e) {
e.preventDefault()
let value = eval(this.state.input)
console.log(value)
}
render() {
return(
<div>
<form onSubmit={(e) => this.handleSubmit(e)}>
<input type="text " onChange={(e) => this.handleChange(e)}/>
<button>Send</button>
</form>
<p>
{this.state.input}
</p>
</div>
)
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode >
<App / >
</React.StrictMode>,
rootElement
);<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>