Javascript 查询选择器与目标

在下面的代码中，const password如何在authorize（）函数中使用.querySelector？我有点困惑，因为：

JSX并不是严格意义上的Javascript，所以为什么您甚至可以使用.querySelector呢

其次，在JavaScript中，您只需选择input，因为这将表示密码输入框，但在本例中，已选择了input[type=“password”]。这是因为在HTML中输入框没有命名，所以您必须区分它们吗

如果authorize（）使用e.target，为什么需要querySelector？不会授权已经实现的密码输入字段是什么触发功能？或者我错了，相反，触发authorize（）的“e”是表单，与document.querySelector非常相似，您需要选择输入字段本身，因为这是表单的子类型

从“React”导入React；
从“react dom”导入react dom；
类Contact扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
密码：“箭鱼”，
授权：假
};
this.authorize=this.authorize.bind（this）；
}
授权（e）{
const password=**e.target.querySelector(
'输入[type=“password”]”）。值**
const auth=（password==this.state.password）；
这是我的国家({
授权：auth
});
}
render（）{
让登录=(
****
);
让contactInfo=(


client@example.com


555.555.5555


);
返回(
{this.state.authorized？'Contact'：'输入密码'}
{this.state.authorized？contactInfo:login}
);
}
}
ReactDOM.render(
, 
document.getElementById（'app'）
);
谢谢

JSX是JS的扩展语法。添加更多的东西并不会阻止你使用现有的东西

不需要使用该代码段中特定的选择器。它不会损害并有助于可读性

提交事件的目标是表单，而不是输入。如果需要读取输入，则必须以某种方式进行选择<代码>查询选择器是一种非常常见的方法

---

---

也就是说，这不是编写React应用程序的惯用方法。请参阅，了解公认的React方法。

通常，您希望React中有受控组件，并将输入值保持在状态内，让React成为唯一的真理来源，而不是让DOM来决定什么是什么。使用挂钩的一个简单示例是：

import React from 'react';

const SimpleExample = () => {
  // use a piece of state to track and hold the input value
  const [inputVal, setInputVal] = useState("");

  // change state on input change
  const handleChange = event => setInputVal(event.target.value);

  // react also handles submit 
  const handleSubmit = event => {
    // prevent default browser behaviour
    event.preventDefault();
    // you can send values held inside state to the back-end here
    console.log("Submitting...", inputVal)
  }

  return (
   <form onSubmit={event => handleSubmit(event)}>
     <input 
       type="password" 
       // the value of the input is held by React state
       value={inputVal} 
       // change state something is being typed inside input
       onChange={event => handleChange(event)} 
     />
     <button>Submit</button>
   </form>
  )
}

从“React”导入React；
常量SimpleExample=（）=>{
//使用一段状态跟踪并保持输入值
常量[inputVal，setInputVal]=useState（“”）；
//输入更改时更改状态
const handleChange=event=>setInputVal（event.target.value）；
//react还处理提交
const handleSubmit=事件=>{
//防止默认浏览器行为
event.preventDefault（）；
//您可以在此处将状态内保存的值发送到后端
console.log（“提交…”，inputVal）
}
返回(
handleSubmit（事件）}>
handleChange（事件）}
/>
提交
)
}

JSX编译为Javascript，它不能替代DOM。我假设代码直接访问DOM，因为作者不太擅长于响应。你不知道这句话是什么意思？“DOM的替代品”？否则您将如何访问和更改DOM？您会问“JSX不是严格意义上的Javascript，那么为什么您甚至可以使用.querySelector？”这没有任何意义，浏览器总是使用DOM，因此您可以始终使用.querySelector。JSX不会以任何方式取代DOM。明白了，非常感谢