React. Input Radio

Question

Есть группа 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>

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

Answer 1

В стейте храните текущий выбранный элемент и проверяйте соответствие в рендере. При смене радио-пункта в стейт записываем 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>