ПРИВЕТ! Я новичок в реакции и пытаюсь сделать несколько переключателей

Я работаю над созданием нескольких переключателей, которые дают мне выбранное значение, когда я выбираю другой переключатель, предыдущий автоматически отменяет выбор.

Также не отображается значение выбранного переключателя. Я попытался использовать функцию handleChange для события onChange, но получил ошибку handleChange undefined.

Вот мой код ...

    const InspectionsForm = () => {

  const [state, setState] = useState();

  const handleChange = (e) => {
    const { name, value } = e.target;

    setState({
      [name]: value,
    });
  };
  const fieldItems = [
    {
      name: "Front Bumper",
    },
    { name: "Roof" },
    { name: "Front Left Door" },
    { name: "Rear Left Door" },
    { name: "Front Right Door" },
    { name: "Rear Right Door" },
    { name: "Front Left Fender" },
    { name: "Rear Left Fender" },
    { name: "Front Right Fender" },
    { name: "Rear Right Fender" },
    { name: "Boot" },
    { name: "Rear Bumper" },
  ];

  return (
    <div className="flex-row align-items-center inspection-section">
      <h3>CAR DETAILS</h3>
      <Container className="auction-filter box-shadow">
        <div className="container-buttons"></div>
      </Container>
      <div className="my-4">
        <h3>INSPECTIONS</h3>
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>Fields</th>
                <th>Original</th>
                <th>Repaint</th>
                <th>PR</th>
                <th>N/C</th>
              </tr>
            </thead>
            <tbody>
              {fieldItems.map((item)=>{
                return(
                  <tr>
                  <td>{item.name}</td>
                  <td>
                    <Form.Check
                      className="radio-size"
                      type="radio"
                      aria-label="radio 1"
                      value="original"
                      name="field"
                      onChange={handleChange()}
                    />
                  </td>
                  <td>
                    <Form.Check
                      className="radio-size"
                      type="radio"
                      aria-label="radio 1"
                      value="repaint"
                      name="field"
                      onChange={handleChange()}
                    />
                  </td>
                  <td>
                    <Form.Check
                      className="radio-size"
                      type="radio"
                      aria-label="radio 1"
                      value="PR"
                      name="field"
                      onChange={handleChange()}
                    />
                  </td>
                  <td>
                    <Form.Check
                      className="radio-size"
                      type="radio"
                      aria-label="radio 1"
                      value="N/C"
                      name="field"
                      onChange={handleChange()}
                    />
                  </td>
                </tr>
                )
              })}

            </tbody>
          </table>
        </div>

        <div className="container-buttons">
          <Button className="mr-4" variant="light">
            Submit
          </Button>

          <Button variant="dark">Clear</Button>
        </div>
      </div>
    </div>
  );
};

export default InspectionsForm;

reactjs javascript events radio-button
person Waqas Umer    schedule 20.06.2021    source источник
comment
codeandbox.io/s/little-brook-xw2b6?file = / src / App.js   -  person Sarun UK    schedule 20.06.2021

Ответы (2)


arrow_upward
1
arrow_downward

У меня работает нормально с onChange={handleChange}. Можете ли вы проверить эту песочницу кода и сказать мне что для тебя странно?

PS Не забудьте добавить key={item.name}, когда вы создаете элементы с картой или итерацией в целом (ключ должен быть уникальным, поэтому я использовал item.name). И никогда не используйте class='', но className='' в элементах реакции.

PS2 Я отредактировал пример песочницы кода, чтобы добиться того, чего, как я думал, вы хотели достичь. В принципе, удобно сгенерировать td-отображение списка опций. Затем вам нужно добавить свойство selected в form.checkbox, если состояние имеет соответствующее свойство и его значение является параметром, который вы создаете.

person Zeno Dalla Valle    schedule 20.06.2021

arrow_upward
1
arrow_downward

когда я выбираю другой переключатель, предыдущий автоматически снимает выделение

Это связано с тем, что вы указали один и тот же атрибут имени для компонента Form.Check в цикле. Вы можете избежать этого, передав указатель или имя самого элемента.

но получил ошибку handleChange undefined.

Это происходит из-за того, что вы вызвали функцию, которая возвращает void внутри свойства onChange для Form.Check. Просто передайте функцию как есть, не вызывая ее внутри onChange.

{fieldItems.map((item, index)=>{
  return(
    <tr>
    <td>{item.name}</td>
    <td>
      <Form.Check
        className="radio-size"
        type="radio"
        aria-label="radio 1"
        value="original"
        name={`field${index}`}
        onChange={handleChange}
      />
    </td>
  ...
}
person Aseer KT Miqdad    schedule 20.06.2021