Question

请参见下面的代码段

使用React控制复选框输入时，使用value或checked属性有什么区别？

我应该使用哪个？

function App() {

  const [inputState, setInputState] = React.useState(false);

  function onChange(event) {
    const inputValue = event.target.checked;
    setInputState(inputValue);
  }

  return(
    <React.Fragment>
      <div>
        Using value
        <input 
          type="checkbox"
          onChange={onChange}
          value={inputState}      // USES value
        />
      </div>
      <div>
        Using checked
        <input 
          type="checkbox"
          onChange={onChange}
          checked={inputState}      // USES checked
        />
      </div>
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));

input {
  transform: scale(1.5) translateX(10px);
}

div {
  margin: 16px;
}

<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>
<div id ="root"/>

Answer 1

如果要使用checked类型的input元素，则应该正式使用checkbox属性。这在官方documentation中有所说明。从那里，在App组件上，只需将状态设置为true或false，即可切换复选框状态。

话虽如此，使用value道具/属性也有效。但是，就个人而言，我建议不要这样做，即使这样做可能会起作用。

Answer 2

复选框上的值和选中属性之间存在细微差别

选中的布尔值； （如果存在），默认情况下该复选框处于启用状态

值（如果当前已选中复选框，则为提交表单时复选框的值的字符串）

已定义Checked属性，以指定是否选中该复选框，而value则用于分配一个值，该值在选中该复选框时使用

选中时，复选框的默认值为const string = "Create heading 1 that will have class abc and id xyz"; const elementList = [ {name: 'heading 1', tag: 'h1'}, {name: 'heading 2', tag: 'h2'} {name: 'paragraph', tag: 'p'}, ]; function convertTag(input) { return elementList.reduce((acc, a) => { const re = new RegExp(a.name,"g"); return acc.replace(re, a.tag); }, input); } let initialString = convertTag(string) //returns create h1 that will have class abc and id xyz let htmlElement = initialString. split (" ")[1]; // will return h1 let code = `<${htmlElement}> </${htmlElement}>`;

MDN docs对此进行了详细介绍

反应受控复选框输入。使用“值”或“选中”属性？

2 个答案: