React check radio button

Question

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

Так что я не могу установить атрибут «checked» с помощью реквизитов, иначе он должен дождаться окончания вычисления. Вызов myinput.checked = "checked" в обратном вызове inChange также не обновляет его.

Мой обходной путь, чтобы написать 10 некрасивые и глупые строки кода, как тезисы из них, так что состояние обновления, а затем мы получаем реквизита в конце действия:

getInitialState: function() { 
    // "anti-pattern", according to the docs 
    return {value: this.props.value}; 
}, 

componentWillReceiveProps: function(nextProps) { 
    // because we use the state in the <input>, it needs to mirror the props 
    // when they change for another reason. I call it dirty. 
    this.setState({value: nextProps.value}); 
}, 

onChange: function (e) { 
    this.setState({value: e.target.value}); // to update it right now 
    Actions.longAction(e.target.value); // long action 
}, 

render: function() { 
    ... 
    return <input 
     ... 
     type="radio" 
     checked={ this.state.value === 1} 
    />; 
} 

Есть ли лучше способ проверить сразу, визуально, вариант, который пользователь нажал?

Answer 1

В реакторе не читайте DOM.
Вместо этого, управлять checked в вас Checkbox компонента. Поскольку флажок содержит только логическое значение (отмечено), это очень просто. При каждом изменении вы инвертируете это значение и вызываете onChange обработчик.

Посмотрите эту структуру, не стесняйтесь ее отредактировать в соответствии с вашими потребностями.

var Parent = React.createClass({ 
    getInitialState() { 
    return { 
     checked: false, 
    } 
    }, 

    onChange(checked) { 
    this.setState({ checked }); 
    }, 

    render: function() { 
    return <Checkbox checked={this.state.checked} onChange={this.onChange} />; 
    } 
}); 

var Checkbox = React.createClass({ 
    onChange() { 
    this.props.onChange(!this.props.checked); 
    }, 

    render() { 
    const props = { 
     ...this.props, 
     onChange: this.onChange, 
    }; 

    return <input type="checkbox" {...props} />; 
    } 
}); 

Работа скрипка: https://jsfiddle.net/69z2wepo/37640/