Reactjs 在react中发生双向绑定？_Reactjs

Reactjs 在react中发生双向绑定？

reactjs

Reactjs 在react中发生双向绑定？,reactjs,Reactjs,我听说双向装订在中国不是免费的。由此我了解到，如果我们添加一个输入字段并在其中键入一些文本，它就不会反映按下的键。但是有钩子（App1.js）或没有钩子（App2.js）的输入字段的行为相同，它反映了键入的文本。有人能告诉我以下代码（App1.js、App2.js）之间的区别吗 index.html：页面标题 App1.js：从“React”导入React，{useState} 从“react dom”导入{render} 常量App1=（）=>{ 控制台日志（“nnn”） const[

我听说双向装订在中国不是免费的。由此我了解到，如果我们添加一个输入字段并在其中键入一些文本，它就不会反映按下的键。但是有钩子（App1.js）或没有钩子（App2.js）的输入字段的行为相同，它反映了键入的文本。有人能告诉我以下代码（App1.js、App2.js）之间的区别吗

index.html：
页面标题
App1.js：
从“React”导入React，{useState}
从“react dom”导入{render}
常量App1=（）=>{
控制台日志（“nnn”）
const[name，setName]=useState（“你好”）
返回(
（setName（e.target.value））}>
)
}
render（，document.getElementById（“根”））
App2.js：
从“React”导入React，{useState}
从“react dom”导入{render}
常量应用=（）=>{
返回(
)
}
render（，document.getElementById（“root2”））

为什么在这个场景中我们需要钩子？当App2中的输入反映键盘输入的文本时

我是新来的，所以如果我愚蠢，请忽略我的愚蠢。

那里没有发生双向数据绑定。在

App2.js

上，您使用的不是绑定到正常DOM的，而是绑定到正常DOM的。

那里没有发生双向数据绑定。在您的

App2.js

上，您正在使用一个不一定会做出反应，但会对普通DOM作出反应的对象。

您计划如何访问用户在App2中键入的值？您计划如何访问用户在App2中键入的值？

index.html:
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>
    <div id="root"></div>
    <script src="App1.js"></script>

    <div id="root2"></div>
    <script src="App2.js"></script>
</body>
</html>

App1.js:
import React,{useState} from "react"
import {render} from "react-dom"
const App1 = ()=>{

    console.log("nnn")
    const [name,setName] = useState("hello")
    return (
    <div>
            <label htmlFor="name">
            </label>
            <input 
            id = "name"
            value = {name}
            onChange = {(e)=>(setName(e.target.value))}>
            </input>
    </div>
    )

}

render(<App1/>, document.getElementById("root"))

App2.js:
import React,{useState} from "react"
import {render} from "react-dom"
const App = ()=>{
    return (
        <div>
            <label htmlFor="name">
            </label>
            <input 
            id = "name">
            </input>
    </div>
    )
}

render(<App/>, document.getElementById("root2"))