Javascript 反应：如何清除元素中的文本？_Javascript_Html_Reactjs

Javascript 反应：如何清除元素中的文本？

javascript html reactjs

Javascript 反应：如何清除元素中的文本？,javascript,html,reactjs,Javascript,Html,Reactjs,有一个包含文本，按名为“clear”（清除）的时应清除该文本。但是，按下时出现错误： TypeError:null不是对象（计算'document.getElementById（id）.innerHTML=“0”'）使用this.display（e.target.id）的所有按钮都可以工作。只有使用this.clear（'display'）的“清除”按钮不起作用任何帮助都将不胜感激 index.js： import React from 'react'; import ReactDOM fr

有一个

包含文本，按名为“clear”（清除）的

时应清除该文本。但是，按下时出现错误：

TypeError:null不是对象（计算'document.getElementById（id）.innerHTML=“0”'）

使用

this.display（e.target.id）

的所有按钮都可以工作。只有使用

this.clear（'display'）

的“清除”按钮不起作用

任何帮助都将不胜感激

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';


class JavascriptCalculator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     
    }
    this.display = this.display.bind(this);
    this.clear = this.clear.bind(this);
  }

  display(id){
    let symbol = document.getElementById(id).innerHTML;
    document.getElementById('display').innerHTML = symbol;
  }

  clear(id){
    document.getElementById(id).innerHTML = "0";
  }

  render() {
    return (
      <div id="javascript-calculator">
      <h1 id="title">Javascript Calculator</h1>
      <div id="display"><p>0</p></div>
      <hr/>
      <div>
      <button id="clear"  onClick={this.clear('display')}> clear </button>
      <button id="equals"  onClick={e => this.display(e.target.id)}> = </button>
      <button id="zero"  onClick={e => this.display(e.target.id)}> 0 </button>
      <button id="one"  onClick={e => this.display(e.target.id)}> 1 </button>
      <button id="two"  onClick={e => this.display(e.target.id)}> 2 </button>
      <button id="three"  onClick={e => this.display(e.target.id)}> 3 </button>
      <button id="four"  onClick={e => this.display(e.target.id)}> 4 </button>
      <button id="five"  onClick={e => this.display(e.target.id)}> 5 </button>
      <button id="six"  onClick={e => this.display(e.target.id)}> 6 </button>
      <button id="seven"  onClick={e => this.display(e.target.id)}> 7 </button>
      <button id="eight"  onClick={e => this.display(e.target.id)}> 8 </button>
      <button id="nine"  onClick={e => this.display(e.target.id)}> 9 </button>
      <button id="add"  onClick={e => this.display(e.target.id)}> + </button>
      <button id="subtract"  onClick={e => this.display(e.target.id)}> - </button>
      <button id="multiply"  onClick={e => this.display(e.target.id)}> * </button>
      <button id="divide"  onClick={e => this.display(e.target.id)}> / </button>
      <button id="decimal"  onClick={e => this.display(e.target.id)}> . </button>
      </div>
      </div>
    );
  }
}

ReactDOM.render(<JavascriptCalculator />, document.getElementById("app"));

从“React”导入React；
从“react dom”导入react dom；
导入“/style.css”；
类JavascriptCalculator扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
}
this.display=this.display.bind（this）；
this.clear=this.clear.bind（this）；
}
显示器（id）{
让symbol=document.getElementById（id）.innerHTML；
document.getElementById（'display'）.innerHTML=symbol；
}
清除（id）{
document.getElementById（id）.innerHTML=“0”；
}
render（）{
返回(
Javascript计算器
0

清楚的
this.display（e.target.id）}>=
this.display（e.target.id）}>0
this.display（e.target.id）}>1
this.display（e.target.id）}>2
this.display（e.target.id）}>3
display（e.target.id）}>4
this.display（e.target.id）}>5
this.display（e.target.id）}>6
display（e.target.id）}>7
this.display（e.target.id）}>8
this.display（e.target.id）}>9
this.display（e.target.id）}>+
this.display（e.target.id）}>-
this.display（e.target.id）}>*
this.display（e.target.id）}>/
this.display（e.target.id）}>。
);
}
}
ReactDOM.render（，document.getElementById（“app”）；

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Javascript Calculator</title>
  <style>
  </style>
</head>
<body>
  <main>
    <div id="app"></app>
    </main>
    </script>
  </body>
  </html>


Javascript计算器

您可以对数字x和y使用状态

然后，只需将x和y设置为0，即可实现重置功能。

您可以对数字x和y使用状态

然后，只需将x和y设置为0，即可实现重置功能。

更改此行：

      <button id="clear"  onClick={this.clear('display')}> clear </button>

清除

为此：

      <button id="clear"  onClick={e => this.clear('display')}> clear </button>

this.clear（'display'）}>clear

您没有传递函数，而是直接在render方法中执行它。这就是它找不到ID为“display”的元素的原因-它根本没有渲染。

更改此行：

      <button id="clear"  onClick={this.clear('display')}> clear </button>

清除

为此：

      <button id="clear"  onClick={e => this.clear('display')}> clear </button>

this.clear（'display'）}>clear

您没有传递函数，而是直接在render方法中执行它。这就是它找不到ID为“display”的元素的原因-它根本没有呈现。

请不要将ID用于react js，请检查下面的代码。此外，使用挂钩是创建react组件的更好、更快的方法

import React, { useState } from "react"
import ReactDOM from "react-dom"
import "./style.css"


const JavascriptCalculator = () => {
const [symbol, setSymbol] = useState(0)

const display = (value) => {
   setSymbol(value)
}

const clear = () => {
    setSymbol(0)
}
// dont use id with react, if must try using ref(check reactjs.org for more)
return (
<div id="javascript-calculator">
  <h1 id="title">Javascript Calculator</h1>
  {/*no need for accessing this element id*/}
  <div id="display"><p>{symbol}</p></div>
  <hr/>
  <div>
    <button id="clear" onClick={() => clear()}> clear
    </button>
    {/*pass the value as argument for display function*/}
    <button id="equals" onClick={e => display("=")}> =</button>
    <button id="zero" onClick={e => display("0")}> 0</button>
    <button id="one" onClick={e => display("1")}> 1</button>
    <button id="two" onClick={e => display("2")}> 2</button>
    <button id="three" onClick={e => display("3")}> 3</button>
    <button id="four" onClick={e => display("4")}> 4</button>
    <button id="five" onClick={e => display("5")}> 5</button>
    <button id="six" onClick={e => display("6")}> 6</button>
    <button id="seven" onClick={e => display("7")}> 7</button>
    <button id="eight" onClick={e => display("8")}> 8</button>
    <button id="nine" onClick={e => display("9")}> 9</button>
    <button id="add" onClick={e => display("+")}> +</button>
    <button id="subtract" onClick={e => display("-")}> -</button>
    <button id="multiply" onClick={e => display("*")}> *</button>
    <button id="divide" onClick={e => display("/")}> /</button>
    <button id="decimal" onClick={e => display(".")}> .</button>
  </div>
</div>
)
}

ReactDOM.render(<JavascriptCalculator/>, document.getElementById("app"))

import React，{useState}来自“React”
从“react dom”导入react dom
导入“/style.css”
常量JavascriptCalculator=（）=>{
const[symbol，setSymbol]=useState（0）
常量显示=（值）=>{
设置符号（值）
}
常数清除=（）=>{
设置符号（0）
}
//如果必须尝试使用ref，请不要将id与react一起使用（更多信息，请访问reactjs.org）
返回(
Javascript计算器
{/*无需访问此元素id*/}
{symbol}

clear（）}>清除
{/*将值作为display函数的参数传递*/}
显示（“=”）}>=
显示（“0”）}>0
显示（“1”）}>1
显示（“2”）}>2
显示（“3”）}>3
显示（“4”）}>4
显示（“5”）}>5
显示（“6”）}>6
显示（“7”）}>7
显示（“8”）}>8
显示（“9”）}>9
显示（“+”）}>+
显示（“-”）}>-
显示（“*”）}>*
显示（“/”）}>/
显示（“.”}>。
)
}
ReactDOM.render（，document.getElementById（“app”））

如果您有问题，请告诉我，请不要将id用于react js，请检查下面的代码。此外，使用挂钩是创建react组件的更好、更快的方法

import React, { useState } from "react"
import ReactDOM from "react-dom"
import "./style.css"


const JavascriptCalculator = () => {
const [symbol, setSymbol] = useState(0)

const display = (value) => {
   setSymbol(value)
}

const clear = () => {
    setSymbol(0)
}
// dont use id with react, if must try using ref(check reactjs.org for more)
return (
<div id="javascript-calculator">
  <h1 id="title">Javascript Calculator</h1>
  {/*no need for accessing this element id*/}
  <div id="display"><p>{symbol}</p></div>
  <hr/>
  <div>
    <button id="clear" onClick={() => clear()}> clear
    </button>
    {/*pass the value as argument for display function*/}
    <button id="equals" onClick={e => display("=")}> =</button>
    <button id="zero" onClick={e => display("0")}> 0</button>
    <button id="one" onClick={e => display("1")}> 1</button>
    <button id="two" onClick={e => display("2")}> 2</button>
    <button id="three" onClick={e => display("3")}> 3</button>
    <button id="four" onClick={e => display("4")}> 4</button>
    <button id="five" onClick={e => display("5")}> 5</button>
    <button id="six" onClick={e => display("6")}> 6</button>
    <button id="seven" onClick={e => display("7")}> 7</button>
    <button id="eight" onClick={e => display("8")}> 8</button>
    <button id="nine" onClick={e => display("9")}> 9</button>
    <button id="add" onClick={e => display("+")}> +</button>
    <button id="subtract" onClick={e => display("-")}> -</button>
    <button id="multiply" onClick={e => display("*")}> *</button>
    <button id="divide" onClick={e => display("/")}> /</button>
    <button id="decimal" onClick={e => display(".")}> .</button>
  </div>
</div>
)
}

ReactDOM.render(<JavascriptCalculator/>, document.getElementById("app"))

import React，{useState}来自“React”
从“react dom”导入react dom
导入“/style.css”
常量JavascriptCalculator=（）=>{
const[symbol，setSymbol]=useState（0）
常量显示=（值）=>{
设置符号（值）
}
常数清除=（）=>{
设置符号（0）
}
//如果必须尝试使用ref，请不要将id与react一起使用（更多信息，请访问reactjs.org）
返回(
Javascript计算器
{/*无需访问此元素id*/}
{symbol}

clear（）}>清除
{/*将值作为display函数的参数传递*/}
显示（“=”）}>=
显示（“0”）}>0
显示（“1”）}>1
显示（“2”）}>2
显示（“3”）}>3
显示（“4”）}>4
显示（“5”）}>5
显示（“6”）}>6
显示（“7”）}>7
显示（“8”）}>8
显示（“9”）}>9
显示（“+”）}>+
显示（“-”）}>-
显示（“*”）}>*
显示（“/”）}>/
显示（“.”}>。
)
}
ReactDOM.render（，document.getElementById（“app”））

如果您有问题，请告诉我解决方案：

import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';


class JavascriptCalculator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      symbol: 0
    }
    this.display = this.display.bind(this);
  }

  display(id){
    this.setState({ symbol: id })
  }

  render() {
    return (
      <div id="javascript-calculator">
      <h1 id="title">Javascript Calculator</h1>
      <div id="display">{this.state.symbol}</div>
      <hr/>
      <div>
      <button id="clear" onClick={e => this.display("0")}> clear</button>
      <button id="equals" onClick={e => this.display("=")}> = </button>
      <button id="zero" onClick={e => this.display("0")}> 0 </button>
      <button id="one" onClick={e => this.display("1")}> 1 </button>
      <button id="two" onClick={e => this.display("2")}> 2 </button>
      <button id="three" onClick={e => this.display("3")}> 3 </button>
      <button id="four" onClick={e => this.display("4")}> 4 </button>
      <button id="five" onClick={e => this.display("5")}> 5 </button>
      <button id="six" onClick={e => this.display("6")}> 6 </button>
      <button id="seven" onClick={e => this.display("7")}> 7 </button>
      <button id="eight" onClick={e => this.display("8")}> 8 </button>
      <button id="nine" onClick={e => this.display("9")}> 9 </button>
      <button id="add" onClick={e => this.display("+")}> + </button>
      <button id="subtract" onClick={e => this.display("-")}> - </button>
      <button id="multiply" onClick={e => this.display("*")}> * </button>
      <button id="divide" onClick={e => this.display("/")}> / </button>
      <button id="decimal" onClick={e => this.display(".")}> . </button>
      </div>
      </div>
    );
  }
}

ReactDOM.render(<JavascriptCalculator />, document.getElementById("app"));

从“React”导入React；
从“react dom”导入react dom；
导入“/style.css”；
类JavascriptCalculator扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
符号：0
}
this.display=this.display.bind（this）；
}
显示器（id）{
this.setState（{symbol:id}）
}
render（）{
返回(
Javascript计算器
{this.state.symbol}

此参数为.display（“0”）}>clear
此.display（“=”）}>=
此参数为.display（“0”）}>0
此参数为.display（“1”）}>1
这是一个.display（“2”）}>2
这个.display（“3”）}>3
这个.display（“4”）}>4
这个。显示（“5”）}>5
这个。显示（“6”）}>6
这个.display（“7”）}>7
这个.display（“8”）}>8
这个.display（“9”）}>9
显示（“+”}>+
此.display（“-”}>-
此。显示（“*”}>*
此。显示（“/”}>/
这是我的显示器(