Как вставить данные внутрь radio?

Question

У меня есть массив объектов со свойством sex, которое указывает на пол. Требуется сделать так, чтобы при выборе элемента зажигался соответствующий элемент радио. True = Мужчина, False = женщина.

Так же требуется получать эти данные, чтобы динамически менять их внутри объекта

<div className="form-check">
    <input className="form-check-input" type="radio" name="flexRadioDefault"
        id="flexRadioDefault1"
        value = {true}
        name ="sex"
        onChange={this.changeInputHandler}
        checked={this.props.items.activeUser.sex}
    ></input>
    <label className="form-check-label" htmlFor="flexRadioDefault1">
        М
    </label>
</div>

<div className="form-check">
    <input className="form-check-input" type="radio" name="flexRadioDefault"
        id="flexRadioDefault1"
        value = {false}
        name ="sex"
        onChange={this.changeInputHandler}
        checked={this.props.items.activeUser.sex}
    ></input>
    <label className="form-check-label" htmlFor="flexRadioDefault1">
        Ж
    </label>
</div>

Answer 1

Сделал на функциональных компонентах на классовых суть будет та же

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <!-- We will put our React component inside this div. -->
    <div id="root"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <!-- Load our React component. -->

    <script type="text/babel">

      const User = ({ item, changeSex }) => {
          const changeInputHandler = (e) => {
            const isMale = e.target.value === "Male" ? true : false;  
            changeSex(item, isMale);
          }
          return (
            <React.Fragment>
            <p>{item.name}</p>  
            <div className="form-check">
                <input className="form-check-input" type="radio" name={`sex_${item.name}`}
                    value = "Male"
                    name ={`sex_${item.name}`}
                    checked = {item.isMale === true}
                    onChange={changeInputHandler}
                ></input>
                <label className="form-check-label" htmlFor="flexRadioDefault1">
                    М
                </label>
            </div>

            <div className="form-check">
                <input className="form-check-input" type="radio" name={`sex_${item.name}`}
                    value = "Female"
                    name ={`sex_${item.name}`}
                    checked = {item.isMale !== true}
                    onChange={changeInputHandler}
                ></input>
                <label className="form-check-label" htmlFor="flexRadioDefault1">
                    Ж
                </label>
            </div>
            </React.Fragment>  
          )
      };
      
      const App = () => {
        const [users, setUsers] = React.useState([]);

        React.useEffect(()=> {
           // тут получаем данные и потом устанавливаем
          setUsers(
            [
              {name: "Mark", isMale:true},
              {name: "Maria", isMale:false}
            ]
          )
        },[]) // [] - тоже самое что componentDidMount

        const changeUserSex = (user, isMale) => {
          // меняем данные о пользователе в списке пользователей
          const findedUser = users.find(u => u.name === user.name);
          const userIndex = users.indexOf(findedUser);
          const newUser = {...findedUser, isMale}

          const newUsers = [...users]
          newUsers.splice(userIndex, 1, newUser);
          setUsers(newUsers)
        }

        return (
          <React.Fragment>  
            {
              users.map(user => (
                <User key={user.name} item={user} changeSex={changeUserSex}/>
              ))
            }
          </React.Fragment>  
        );
      };

      ReactDOM.render(<App />, document.getElementById("root"));
      
    </script>
  </body>
</html>

БЛОГ НА HUSL

Как вставить данные внутрь radio?

Ответы (1 шт):