如何使用react js在段落中显示结果

Question

如何显示结果，现在在下面的代码中我只将它导出到控制台，但我希望它在浏览器中的段落或其他标记中。我知道这是一个愚蠢的问题（也许），但我是新手React。

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>

      )

  }

}

Answer 1

设置value为状态。然后使用它访问它this.state.valueimport React, { Component, useState, useEffect } from 'react';class App extends React.Component{&nbsp; constructor(props){&nbsp; &nbsp; super(props)&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; input: 0,&nbsp; &nbsp; &nbsp; value: "",&nbsp; &nbsp; }&nbsp; }&nbsp;&nbsp; handleChange(e){&nbsp; &nbsp; this.setState({input: e.target.value})&nbsp; }&nbsp; handleSubmit(e){&nbsp; &nbsp; e.preventDefault()&nbsp; &nbsp; let value = eval(this.state.input)&nbsp; &nbsp; this.setState({value});&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }&nbsp; render(){&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <form onSubmit={(e) => this.handleSubmit(e)}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text " onChange={(e) => this.handleChange(e)}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button>Send</button>&nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; <p>{this.state.value}</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; )&nbsp; }}export default App;

Answer 2

检查您是否可以通过一些更改来实现这一点。import React, { Component, useState, useEffect } from 'react';class App extends React.Component{&nbsp; constructor(props){&nbsp; &nbsp; super(props)&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; input: 0,&nbsp; &nbsp; &nbsp; value: '', //<-- Added&nbsp; &nbsp; }&nbsp; }&nbsp;&nbsp; handleChange(e){&nbsp; &nbsp; this.setState({input: e.target.value})&nbsp; }&nbsp; handleSubmit(e){&nbsp; &nbsp; e.preventDefault()&nbsp; &nbsp; let value = eval(this.state.input)&nbsp; &nbsp; console.log(value)&nbsp; &nbsp; this.setState({value}); //<--Added&nbsp;&nbsp; }&nbsp; render(){&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <form onSubmit={(e) => this.handleSubmit(e)}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text " onChange={(e) => this.handleChange(e)}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button>Send</button>&nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; <p>{this.state.value}</p> <!-- Added -->&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; )&nbsp; }}

Answer 3

这是一个关于如何做你想做的事情的工作演示：class App extends React.Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props)&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; input: 0&nbsp; &nbsp; }&nbsp; }&nbsp; handleChange(e) {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; input: e.target.value&nbsp; &nbsp; })&nbsp; }&nbsp; handleSubmit(e) {&nbsp; &nbsp; e.preventDefault()&nbsp; &nbsp; let value = eval(this.state.input)&nbsp; &nbsp; console.log(value)&nbsp; }&nbsp; render() {&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form onSubmit={(e) => this.handleSubmit(e)}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text " onChange={(e) => this.handleChange(e)}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button>Send</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.input}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; )&nbsp; }}const rootElement = document.getElementById("root");ReactDOM.render(&nbsp;&nbsp; <React.StrictMode >&nbsp; &nbsp; <App / >&nbsp; </React.StrictMode>,&nbsp; 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>

Answer 4

我可以看到您正在使用 useState 挂钩。您如何设置一个在您提交表单时将更新的状态？就像const [value, setValue] = useState()在你的函数中一样，然后在你的提交函数中调用setValue(value)从那里您可以访问值状态并将其呈现在组件中的任何位置。请注意，您应该只在功能组件内使用钩子。