Javascript 将此JS代码段转换为React

我还没反应过来， 为了了解这一点，您将如何将这段代码转换为反应

<div id="input" contenteditable></div>
        <button id="submit">Convert to kg!</button>
        <br>
        <div id="output"></div>


       <script>

        const button = document.querySelector('#submit');
        const input = document.querySelector('#input');


        function convert() {
            let x=input.textContent;

       if (isNaN(x)) 
           {
           alert("Must input numbers");
           return false;



           }  else {
                const pounds = document.querySelector('#input').textContent;

                let kg = pounds*0.45;
                document.querySelector('#output').innerHTML = pounds + " pounds is " + kg + " kg";
           }
            }



        button.addEventListener('click', convert);

        </script>

换算成公斤！


const button=document.querySelector（“#提交”）；
const input=document.querySelector（“#input”）；
函数转换（）{
设x=input.textContent；
if（isNaN（x））
{
警报（“必须输入数字”）；
返回false；
}否则{
常量磅=document.querySelector（'#input'）.textContent；
kg=磅*0.45；
document.querySelector（“#output”）.innerHTML=lbs+“lbs是”+kg+“kg”；
}
}
按钮。addEventListener（'单击'，转换）；

我将html转换为jsx

<div
    id="input"
    contentEditable
    style={{ width: "40%", border: "solid 1px black", margin: "20px}" }}
  />
  <button id="submit">Convert to kg!</button>
  <br />
  <div id="output" style={{ marginTop: 20 }} />
</div>

换算成公斤！

但是，如何使用Javascript，不知道。。。

---

也许有人能给我一个方向吗？

像这样的。它可能不会如你所愿工作，但从这个例子中，你可以轻松地创建自己的答案，我想

import React from "react";

const convert = (text) => {
  if (parseInt(text, 10) > 0) {
    const kg = parseInt(text, 10) * 0.45;
    document.querySelector("#output").innerHTML =
      text + " pounds is " + kg + " kg";
  }
  alert("You must enter digits");
};

const ExampleComponent = () => {
  const [text, setText] = React.useState("");

  return (
    <section>
      <div id="input" onChange={(e) => setText(e.target)}></div>
      <button id="submit" onClick={() => convert(text)}>
        Convert to kg!
      </button>
      <br />
      <div id="output"> </div>
    </section>
  );
};

从“React”导入React；
const convert=（文本）=>{
if（parseInt（text，10）>0）{
常数kg=parseInt（文本，10）*0.45；
document.querySelector（“输出”）.innerHTML=
文本+“磅为”+kg+“kg”；
}
警报（“您必须输入数字”）；
};
const ExampleComponent=（）=>{
const[text，setText]=React.useState（“”）；
返回(
setText（e.target）}>
转换（文本）}>
换算成公斤！


);
};

类似这样的东西。它可能不会如你所愿工作，但从这个例子中，你可以轻松地创建自己的答案，我想

import React from "react";

const convert = (text) => {
  if (parseInt(text, 10) > 0) {
    const kg = parseInt(text, 10) * 0.45;
    document.querySelector("#output").innerHTML =
      text + " pounds is " + kg + " kg";
  }
  alert("You must enter digits");
};

const ExampleComponent = () => {
  const [text, setText] = React.useState("");

  return (
    <section>
      <div id="input" onChange={(e) => setText(e.target)}></div>
      <button id="submit" onClick={() => convert(text)}>
        Convert to kg!
      </button>
      <br />
      <div id="output"> </div>
    </section>
  );
};

从“React”导入React；
const convert=（文本）=>{
if（parseInt（text，10）>0）{
常数kg=parseInt（文本，10）*0.45；
document.querySelector（“输出”）.innerHTML=
文本+“磅为”+kg+“kg”；
}
警报（“您必须输入数字”）；
};
const ExampleComponent=（）=>{
const[text，setText]=React.useState（“”）；
返回(
setText（e.target）}>
转换（文本）}>
换算成公斤！


);
};

基本功能组件：

• weightLb

  保存用户输入的状态变量

• weightKg

  状态变量以保存转换后的重量

组件和逻辑：

function App() {
  const [weightLb, setWeightLb] = useState(0);
  const [weightKg, setWeightKg] = useState(0);

  const convert = () => {
    if (Number.isNaN(weightLb)) {
      alert("Must input numbers");
    }
    setWeightKg(weightLb * 0.45);
  }

  return (
    <div className="App">
      <label>
        Pounds
        <input type="number" onChange={e => setWeightLb(e.target.value)} />
      </label>
      <button type="button" onClick={convert}>Convert to kg!</button>
      <div>Weight (kg): {weightKg}</div>
    </div>
  );
}

函数应用程序（）{
const[weightLb，setWeightLb]=useState（0）；
常数[weightKg，setWeightKg]=使用状态（0）；
const convert=（）=>{
if（编号isNaN（重量磅））{
警报（“必须输入数字”）；
}
设定重量千克（重量磅*0.45）；
}
返回(
英镑
setWeightLb（e.target.value）}/>
换算成公斤！
重量（kg）：{weightKg}
);
}

注意：除了在沙盒中应用默认样式外，我没有应用任何样式

一个更简单的抽象可能是放弃转换按钮，只需动态转换输入onChange；需要单个状态

function App() {
  const [weightLb, setWeightLb] = useState(0);

  const convert = () => {
    if (Number.isNaN(weightLb)) {
      alert("Must input numbers");
    }
    return weightLb * 0.45;
  };

  return (
    <div className="App">
      <label>
        Pounds
        <input type="number" onChange={e => setWeightLb(e.target.value)} />
      </label>
      <div>Weight (kg): {convert()}</div>
    </div>
  );
}

函数应用程序（）{
const[weightLb，setWeightLb]=useState（0）；
const convert=（）=>{
if（编号isNaN（重量磅））{
警报（“必须输入数字”）；
}
返回权重lb*0.45；
};
返回(
英镑
setWeightLb（e.target.value）}/>
重量（kg）：{convert（）}
);
}

基本功能组件：

• weightLb

  保存用户输入的状态变量

• weightKg

  状态变量以保存转换后的重量

组件和逻辑：

function App() {
  const [weightLb, setWeightLb] = useState(0);
  const [weightKg, setWeightKg] = useState(0);

  const convert = () => {
    if (Number.isNaN(weightLb)) {
      alert("Must input numbers");
    }
    setWeightKg(weightLb * 0.45);
  }

  return (
    <div className="App">
      <label>
        Pounds
        <input type="number" onChange={e => setWeightLb(e.target.value)} />
      </label>
      <button type="button" onClick={convert}>Convert to kg!</button>
      <div>Weight (kg): {weightKg}</div>
    </div>
  );
}

函数应用程序（）{
const[weightLb，setWeightLb]=useState（0）；
常数[weightKg，setWeightKg]=使用状态（0）；
const convert=（）=>{
if（编号isNaN（重量磅））{
警报（“必须输入数字”）；
}
设定重量千克（重量磅*0.45）；
}
返回(
英镑
setWeightLb（e.target.value）}/>
换算成公斤！
重量（kg）：{weightKg}
);
}

注意：除了在沙盒中应用默认样式外，我没有应用任何样式

一个更简单的抽象可能是放弃转换按钮，只需动态转换输入onChange；需要单个状态

function App() {
  const [weightLb, setWeightLb] = useState(0);

  const convert = () => {
    if (Number.isNaN(weightLb)) {
      alert("Must input numbers");
    }
    return weightLb * 0.45;
  };

  return (
    <div className="App">
      <label>
        Pounds
        <input type="number" onChange={e => setWeightLb(e.target.value)} />
      </label>
      <div>Weight (kg): {convert()}</div>
    </div>
  );
}

函数应用程序（）{
const[weightLb，setWeightLb]=useState（0）；
const convert=（）=>{
if（编号isNaN（重量磅））{
警报（“必须输入数字”）；
}
返回权重lb*0.45；
};
返回(
英镑
setWeightLb（e.target.value）}/>
重量（kg）：{convert（）}
);
}

以下是按照上述要求实现React组件的6个步骤：

import React, { Component } from "react"

export default class App extends Component {

  constructor(props) {
    super(props)
    this.state = {weightLb: 0.0, weightKg: 0.0}
  }    

  setWeightLb = (value) => {
    this.setState({weightLb: value})
  }

  convert = () => {
    this.setState({weightKg: (this.state.weightLb * 0.453592)})
  }

  render() {
    return (
      <div>
        <label>
          Pounds
          <input type="number" onChange={e => this.setWeightLb(e.target.value)} />
        </label>
        <button type="button" onClick={this.convert}>
          Convert to kg!
        </button>
        <div>Weight (kg): {this.state.weightKg}</div>
      </div>
    )
  }
}

定义一个名为App的React组件，它扩展了React组件

在组件的构造函数中初始化组件的“状态”。
状态将包含变量（weightLb、weightKg）

定义一种方法（setWeightLb）来更改weightLb的值

定义一种方法（转换）以使用以下公式计算重量kg：

kg=lb x 0.453592

定义“render”方法以显示组件的静态html

在render方法内部，对相应的事件调用setWeightLb和convert

以下是工作示例：

import React, { Component } from "react"

export default class App extends Component {

  constructor(props) {
    super(props)
    this.state = {weightLb: 0.0, weightKg: 0.0}
  }    

  setWeightLb = (value) => {
    this.setState({weightLb: value})
  }

  convert = () => {
    this.setState({weightKg: (this.state.weightLb * 0.453592)})
  }

  render() {
    return (
      <div>
        <label>
          Pounds
          <input type="number" onChange={e => this.setWeightLb(e.target.value)} />
        </label>
        <button type="button" onClick={this.convert}>
          Convert to kg!
        </button>
        <div>Weight (kg): {this.state.weightKg}</div>
      </div>
    )
  }
}

import React，{Component}来自“React”
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）
this.state={weightLb:0.0，weightKg:0.0}
}    
setWeightLb=（值）=>{
this.setState（{weightLb:value}）
}
转换=（）=>{
this.setState（{weightKg:（this.state.weightLb*0.453592）}）
}
render（）{
返回(
英镑
this.setWeightLb（e.target.value）}/>
换算成公斤！