ЗДРАВЕЙ! Нов съм в React и се опитвам да направя множество радио бутони

Работя, за да направя няколко бутона за избор, които ми дават избрана стойност, когато избера друг бутон за избор, предишният автоматично премахва избора.

Също така не показва стойността на избрания бутон за избор. Опитах се да използвам функцията 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
codesandbox.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='' в react елементи.

PS2 Редактирах примера на кодовата пясъчна среда, за да постигна това, което смятах, че искате да постигнете. По принцип е удобно да генерирате td картографиране на списък с опции. След това трябва да добавите избрано свойство към form.checkbox, ако състоянието има съответстващото свойство и неговата стойност е опцията, която генерирате.

person Zeno Dalla Valle    schedule 20.06.2021

arrow_upward
1
arrow_downward

когато избера друг бутон за избор, предишният автоматично премахва избора

Това е така, защото сте дали същия атрибут на име на компонента Form.Check в цикъла. Можете да избегнете това, като подадете индекс или името на самия елемент.

но получи грешката handleChange undefined.

Това идва, защото сте извикали функцията, която връща void вътре в onChange prop на 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