Question

有两个组件container和presenter。
下面的代码显示一个复选框状态为true，另一个复选框也正在更新。因此，如何使用状态？

容器：

 export default class ApplyFormContainer extends Component {
      constructor(props) {
        super(props);
        this.state = {
          form: {
            gender: '',
            checked: false,
          },
        };
      }
      handleCheckBox = e => {
        const {
          target: { checked },
        } = e;
        this.setState({
          form: {
            ...this.state.form,
            checked,
          },
        });
      };
      handleGender = id => {
        this.setState({
          form: {
            ...this.state.form,
            gender: id,
          },
        });
      };

      render() {
        const { handleGender, handleCheckBox } = this;
        const { form } = this.state;
        return (
          <Container>
            <ApplyFormPresenter
              form={form}
              handleGender={handleGender}
              handleCheckBox={handleCheckBox}
            />
          </Container>
        );
      }
    }

演示者：

import React from 'react';
import styled from 'styled-components';

const Form = styled.form`
  display: grid;
`;
const Flex = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  label {
    margin: 2rem;
    /* input[type='checkbox'] {
      display: none;
    }
  } */
  }
`;

const ApplyFormPresenter = ({ form, handleGender, handleCheckBox }) => {
  return (
    <div>
      <Form>
        <Flex>
          <label>
            <span>TEST</span>
            <input
              type="checkbox"
              value="love"
              onChange={handleCheckBox}
              checked={form.checked}
            />
          </label>{' '}
          <label>
            <span>TEST</span>
            <input
              type="checkbox"
              value="friend"
              onChange={handleCheckBox}
              checked={form.checked}
            />
          </label>{' '}
          <label>
            <span>TEST</span>
            <input
              type="checkbox"
              value="money"
              onChange={handleCheckBox}
              checked={form.checked}
            />
          </label>
        </Flex>
      </Form>
    </div>
  );
};

Answer 1

有几种方法可以做到这一点。我的建议：您希望像在对象上一样保护值，并映射其键。

这是使用Hooks的解决方案：

function App() {
  const [state, setState] = React.useState({
    gender: false,
    love: false
  });

  const handleToggle = ({ target }) =>
    setState(s => ({ ...s, [target.name]: !s[target.name] }));

  return (
    <div>
      {Object.keys(state).map(key => (
        <input
          type="checkbox"
          onChange={handleToggle}
          key={key}
          name={key}
          checked={state[key]}
        />
      ))}
    </div>
  );
}

Answer 2

您可以在复选框事件中使用此handleInputChange方法；

  handleInputChange = (event) => {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

如下定义状态变量；

this.state = {
  love: false,
  friend: false,
  money: false
};

然后将id和name参数设置为与您的状态相同的复选框的onChange事件；

<input
  type="checkbox"
  id="friend"
  name="friend"
  onChange={this.handleInputChange}
  checked={this.state.friend}
/>

您可以按以下方式访问它们；

let value = this.state.friend

我如何在反应中使用复选框形式？

2 个答案: