如何使用 react onchange 动态处理复选框更改

Question

您好，如何处理多个复选框的 onChange？以下示例允许我控制一个复选框的值。

class App extends Component {
  constructor() {
    super();
    this.state = {
      i_agree: false
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
     
  handleChange(event) {
    this.setState({i_agree: !this.state.i_agree});
  }
     
  handleSubmit(event) {
    console.log(this.state);
    event.preventDefault();
  }
     
  render() {
    return (
      <div>
        <h1>React Checkbox onChange Example - ItSolutionStuff.com</h1>
        <form onSubmit={this.handleSubmit}>
           
          <label>
            <input
              type="checkbox"
              defaultChecked={this.state.i_agree}
              onChange={this.handleChange}
            /> I Agree with this content...
          </label>
         <label>
            <input
              type="checkbox"
              defaultChecked={this.state.isChecked}
              onChange={this.handleChange}
            /> I want to control this...
          </label>
           
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}

如何设置我的 handleChange 函数来处理每个复选框的更改，而不是检查一个复选框。

Reference Link

尝试 1

class App extends Component {
      constructor() {
        super();
        this.state = {
          i_agree: false,
          isChecked: false

        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }
         
      handleChange(event) {
        this.setState({
          [e.target.name]: !e.target.value
        });
      }
         
      handleSubmit(event) {
        console.log(this.state);
        event.preventDefault();
      }
         
      render() {
        return (
          <div>
            <h1>React Checkbox onChange Example - ItSolutionStuff.com</h1>
            <form onSubmit={this.handleSubmit}>
               
              <label>
                <input
                  type="checkbox"
                  defaultChecked={this.state.i_agree}
                  onChange={this.handleChange}
                  name="i_agree"
                /> I Agree with this content...
              </label>
             <label>
                <input
                  type="checkbox"
                  defaultChecked={this.state.isChecked}
                  onChange={this.handleChange}
                  name="isChecked"
                /> I want to control this...
              </label>
               
              <input type="submit" value="Submit" />
            </form>
          </div>
        );
      }
    }

我更新了 onChange 处理程序并在每个标签中添加了名称属性。但这不起作用或引发任何错误。

Answer 1

我会使用 checked 而不是 defaultChecked 来控制复选框输入。

对于 handleChange 你可以使用 name 和 checked 属性来更新复选框状态（你也可以翻转它的布尔状态而不是使用 checked） .这样你就可以只有一个处理程序来处理你的所有复选框。

Typescript 解决方案

import React from "react";

interface CheckboxProps {
  checked: boolean;
  label: string;
  name: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}
// I abstracted Checkbox to a component but it's up to you
const Checkbox = ({ checked, onChange, label, name }: CheckboxProps) => (
  <label>
    <input
      type="checkbox"
      checked={checked} // use checked to have a controlled component
      onChange={onChange}
      name={name}
    />
    {label}
  </label>
);

interface AppState {
  iAgree: boolean;
  wantCookies: boolean;
  wishList: boolean;
}

class App extends React.Component<{}, AppState> {
  // constructor method is called implicit you can define state outside
  // for binding methods, you can declare them as arrow functions
  state = {
    iAgree: false,
    wantCookies: false,
    wishList: false
  };

  // extract name and checked properties
  handleChange = ({
    target: { name, checked }
  }: React.ChangeEvent<HTMLInputElement>) =>
    this.setState({ [name]: checked } as Pick<AppState, keyof AppState>);

  handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    console.log(this.state);
    event.preventDefault();
  };

  render() {
    const { iAgree, wantCookies, wishList } = this.state;
    return (
      <div>
        <h1>React Checkbox onChange Example - ItSolutionStuff.com</h1>
        <form onSubmit={this.handleSubmit}>
          <Checkbox
            onChange={this.handleChange}
            name={"iAgree"}
            checked={iAgree}
            label={"I agree with terms"}
          />
          <Checkbox
            onChange={this.handleChange}
            name={"wantCookies"}
            checked={wantCookies}
            label={"I want more cookies"}
          />
          <Checkbox
            onChange={this.handleChange}
            name={"wishList"}
            checked={wishList}
            label={"Put Me on wishlist"}
          />
          <br />
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}

export default App;

Javascript解决方案

import React from "react";

// I abstracted Checkbox to a component but it's up to you
const Checkbox = ({ checked, onChange, label, name }) => (
  <label>
    <input
      type="checkbox"
      checked={checked} // use checked to have a controlled component
      onChange={onChange}
      name={name}
    /> { label }
  </label>
)

class App extends React.Component {
    // constructor method is called implicit you can define state outside
    // for binding methods, you can declare them as arrow functions
    state = {
      iAgree: false,
      wantCookies: false,
      wishList: false,
    };

  // extract name and checked properties
  handleChange = ({target: { name, checked }}) => this.setState({[name]: checked});
  
  handleSubmit= (event) => {
    console.log(this.state);
    event.preventDefault();
  }
     
  render() {
    const { iAgree, wantCookies, wishList } = this.state
    return (
      <div>
        <h1>React Checkbox onChange Example - ItSolutionStuff.com</h1>
        <form onSubmit={this.handleSubmit}>
          <Checkbox onChange={this.handleChange} name={'iAgree'} checked={iAgree} label={'I agree with terms'} />
          <Checkbox onChange={this.handleChange} name={'wantCookies'} checked={wantCookies} label={'I want more cookies'} />
          <Checkbox onChange={this.handleChange} name={'wishList'} checked={wishList} label={'Put Me on wishlist'} />
          <br/>
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}

export default  App

fwiw 我删除了构造函数，因为它不是必需的。你可以保留它，它只是声明你的类.

的一种更简洁的方式

实施 TS 的沙箱：https://codesandbox.io/s/so-multi-checkboxes-ts-qz20m

带有实现 JS 的沙箱：https://stackblitz.com/edit/so-multi-checkboxes?file=src/App.js

如何使用 react onchange 动态处理复选框更改

How to handle checkbox change dynamically using react onchange

reactjs

typescript

onchange