如何使用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.value

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;

Answer 2

检查您是否可以通过一些更改来实现这一点。

import React, { Component, useState, useEffect } from 'react';

class App extends React.Component{

  constructor(props){

    super(props)

    this.state = {

      input: 0,

      value: '', //<-- Added

    }

  }

 

  handleChange(e){

    this.setState({input: e.target.value})

  }

  handleSubmit(e){

    e.preventDefault()

    let value = eval(this.state.input)

    console.log(value)

    this.setState({value}); //<--Added 

  }

  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> <!-- Added -->

        </div>

      )

  }

}

Answer 3

这是一个关于如何做你想做的事情的工作演示：

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>

Answer 4

我可以看到您正在使用 useState 挂钩。您如何设置一个在您提交表单时将更新的状态？

就像const [value, setValue] = useState()在你的函数中一样，然后在你的提交函数中调用setValue(value)

从那里您可以访问值状态并将其呈现在组件中的任何位置。请注意，您应该只在功能组件内使用钩子。