将 Class 组件转换为 handleChange Hook答案

【问题标题】：Convert Class component into a handleChange Hook将 Class 组件转换为 handleChange Hook
【发布时间】：2020-12-16 19:51:52
【问题描述】：

我想将这个类组件转换为在函数组件中工作的handleChange 事件。我不完全确定这是可能的，它可能必须是一个钩子。我的语法不太正确。

class CheckboxForm extends Component {
  constructor(props) {
    super(props);
    this.state = { value: [] };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const input = event.target.value;
    this.setState(
      {
        value: this.state.value.includes(input)
          ? this.state.value.filter((item) => item !== input)
          : [...this.state.value, input],
      },
      () => {
        console.log("CheckBox: ", this.state.value);
      }
    );
  }

我的尝试：

export const CheckboxHook = (props) => {
  const [value, setValue] = useState([]);
  const handleCheckbox = (event) => {
    const input = event.target.value;
    setValue(
      value.include(input)
        ? value.filter((item) => item !== input)
        : [value, input],
      () => {
        console.log("Checkbox: ", value);
      }
    );
  };
};

【问题讨论】：

标签： reactjs react-hooks react-component react-functional-component

【解决方案1】：

您似乎正在尝试做这样的事情？您不需要任何自定义挂钩 - 只需 useState 和 useEffect。

const CheckboxForm = (props) => {
  const [checkedItems, setCheckedItems] = useState([]);

  useEffect(() => {
    // equivalent to passing a callback to `this.setState` in class component
    console.log("Checked: ", checkedItems);
  }, [checkedItems])

  const handleCheckbox = (event) => {
    const { value } = event.target;

    // setting with hooks must use a callback
    // if you need access to the previous value
    setCheckedItems(items =>
      items.includes(value)
        ? items.filter(item => item !== value)
        : [...items, value]
    );
  };

  return <form>
    <label>a <input value="a" type="checkbox" onChange={handleCheckbox} /></label>
    <label>b <input value="b" type="checkbox" onChange={handleCheckbox} /></label>
    <label>c <input value="c" type="checkbox" onChange={handleCheckbox} /></label>
  </form>
};

【讨论】：

【解决方案2】：

您可以使用自定义钩子来包装您的处理程序逻辑并像这样使用它：

const useHandleChange = () => {
  const [value, setValue] = React.useState([]);

  const handleChange = (event) => {
    const input = event.target.value;
    setValue(
      {
        value: value.includes(input)
          ? value.filter((item) => item !== input)
          : [...value, input],
      },
      () => {
        console.log("CheckBox: ", value);
      }
    );
  };

  return { value, handleChange };
};

// Usage
const { value, handleChange } = useHandleChange();

// In the render
<Input onChange={handleChange} value={value} />

【讨论】：