Reactjs 是否可以定义React非受控功能组件（无类别）？

下面的复选框会触发可怕的“输入元素必须受控或不受控”警告

const Checkbox = props =>
  <label className="checkbox">
    <input type="checkbox" checked={props.checked} defaultChecked={false}/>
 </label>

const Checkbox=props=>

所有非受控组件的示例都使用基于分类的方法来定义组件，我发现没有一个使用功能组件

---

是否可以定义使用功能定义的非受控组件？

删除选中的

，它将变得非受控：

const Checkbox = props =>
  <label className="checkbox">
    <input type="checkbox" defaultChecked={false}/>
 </label>

const Checkbox=props=>

---

添加选中的

时，React还需要
onChange
。它既可以是受控的，也可以是非受控的
您只需要一个空的onChange：

const Checkbox = props => (
  <label className="checkbox">
    <input type="checkbox" checked={props.checked} onChange={() => void 0} />
  </label>
);

const Checkbox=props=>(
无效0}/>
);
以下是我的第二种方法：

我不认为这是我将如何设计一个组件，但它基本上是你所要求的。不使用onChange绑定，而是使用
useRef
并以这种方式更新复选框的组件

export default function App() {
  const [checked, setChecked] = useState(false);
  const [checked2, setChecked2] = useState(true);

  return (
    <div className="App">
      <h2>Usecase #1</h2>
      <div>currently: {checked ? "true" : "false"}</div>
      <button onClick={e => setChecked(!checked)}>toggle</button>
      <Checkbox checked={checked} setChecked={setChecked} />

      <hr />
      <h2>Usecase #2</h2>
      <div>currently: {checked2 ? "true" : "false"}</div>
      <button onClick={e => setChecked2(!checked2)}>toggle</button>
      <Checkbox checked={checked2} setChecked={setChecked2} />

      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const Checkbox = ({ checked, setChecked }) => {
  const checkboxRef = useRef(null);

  useEffect(() => {
    // Update from props
    checkboxRef.current.checked = checked;

    const handleChange = event => setChecked(event.target.checked);
    // Update parent from change event
    checkboxRef.current.addEventListener("change", handleChange);

    // Cleanup
    return checkboxRef.current.removeEventListener("change", handleChange);
  }, [checked, setChecked]);

  return (
    <label className="checkbox">
      <input type="checkbox" ref={checkboxRef} />
    </label>
  );
};

导出默认函数App（）{
const[checked，setChecked]=使用状态（false）；
const[checked2，setChecked2]=useState（true）；
返回(
用例1
当前：{选中？“真”：“假”}
setChecked（！checked）}>切换

用例2
当前：{checked2？“true”：“false”}
setChecked2（！checked2）}>切换
开始编辑，看看神奇的发生！
);
}
常量复选框=（{checked，setChecked}）=>{
const checkboxRef=useRef（null）；
useffect（（）=>{
//从道具更新
checkboxRef.current.checked=已选中；
const handleChange=event=>setChecked（event.target.checked）；
//从更改事件更新父级
checkboxRef.current.addEventListener（“更改”，handleChange）；
//清理
返回checkboxRef.current.removeEventListener（“更改”，handleChange）；
}，[checked，setChecked]）；
返回(
);
};
这是一个受控组件，他要求的是一个非受控组件。问题是，我想从外部更改选中值并通过道具传递，即不是由于单击复选框，而是由于某些外部事件，因此您需要一个受控组件，您必须提供一个
onChange
事件句柄您需要一个半受控元素，而这正是React所抱怨的，因为您正在定义一个新的arrow函数作为要删除的处理程序，所以清理代码将无法工作。定义一次处理程序，并将其用于事件的注册和注销。