为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

小怪兽爱吃肉 2022-11-03 15:21:20
如何显示结果,现在在下面的代码中我只将它导出到控制台,但我希望它在浏览器中的段落或其他标记中。我知道这是一个愚蠢的问题(也许),但我是新手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>      )  }}
查看完整描述

4 回答

?
动漫人物

TA贡献1815条经验 获得超10个赞

设置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;


查看完整回答
反对 回复 2022-11-03
?
呼唤远方

TA贡献1856条经验 获得超11个赞

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


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>

      )

  }

}


查看完整回答
反对 回复 2022-11-03
?
largeQ

TA贡献2039条经验 获得超7个赞

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


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>



查看完整回答
反对 回复 2022-11-03
?
守着星空守着你

TA贡献1799条经验 获得超8个赞

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

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

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


查看完整回答
反对 回复 2022-11-03
  • 4 回答
  • 0 关注
  • 85 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信