3

Есть группа input-radio. Возле каждого инпута расположен селект. При клике на конкретный инпут соседний селект должен стать активным, остальные должны стать disabled или hide.

class App extends React.Component {
    state = {};

    render () {

        return(
            <div className='wrapper'>
                <form>
                    <label>
                        Vendor
                        <input type="radio" id="scales" className="daychecks"  onClick={() => this.checkOnlyOne(this.value)} />
                        <select disabled></select>
                    </label>
                    <label>
                        Location
                        <input type="radio" id="scales2" className="daychecks" onClick={() => this.checkOnlyOne(this.value)} />
                        <select disabled defaultValue="Category"></select>
                    </label>
                </form>

            </div>
        );
    }    

    checkOnlyOne = () => {
    };

}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Весь код значительно сложнее, "радио" и селектов не два, а больше. Я постарался максимально упростить пример.

1
  • Со значением по умолчанию разобрался. Просто добавил в селект <option>Выберите вариант</option> Commented 21 нояб. 2018 в 8:17

1 ответ 1

3

В стейте храните текущий выбранный элемент и проверяйте соответствие в рендере. При смене радио-пункта в стейт записываем id выбранного элемента

class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        active: "scales"
      };
    }

    checkOnlyOne = (e) => {
      this.setState({
        active: e.target.id
      });
    };

    render () {

        return(
            <div className='wrapper'>
                <form>
                    <label>
                        Vendor
                        <input 
                          type="radio" 
                          id="scales" 
                          className="daychecks"  
                          checked={this.state.active === "scales"}
                          onChange={this.checkOnlyOne} 
                        />
                        <select 
                          disabled={this.state.active !== "scales"}
                        ></select>
                    </label>
                    <label>
                        Location
                        <input 
                          type="radio" 
                          id="scales2" 
                          checked={this.state.active === "scales2"}
                          className="daychecks" 
                          onChange={this.checkOnlyOne}
                        />
                        <select 
                          disabled={this.state.active !== "scales2"}
                          defaultValue="Category"
                        ></select>
                    </label>
                </form>

            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

2
  • Спасибо. :) Все же привязываемся к айди элемента. У меня были подобные мысли, но я не знал, насколько это корректно. Commented 22 нояб. 2018 в 19:05
  • можно к id, я привязался к тому, что было у вас в коде. В любом случае у вас есть какие-то справочники, которые обладают уникальным идентификатором. Можно привязаться к ним. Можно хоть к имени, если оно уникально Commented 22 нояб. 2018 в 19:24

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.