Question

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

2020-07-05

8162

javascript reactjs

我该如何显示结果，现在在下面的代码中，我仅将其导出到控制台，但我希望它在浏览器中的段落或其他标签中显示。我知道这是一个愚蠢的问题（可能），但我对 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>
      )
  }
}

export default App;

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

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

例如，在您的函数中调用 const [value, setValue] = useState() ，然后在提交函数中调用 setValue(value)

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

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>