Question

我一直在改变一个基于REACT的表格，这是我的新手（已经使用了4个月但只是它的一部分，有时候编程的实际进展是基于纯粹的运气，每次都在在这里找到好人的建议。）

目前我的任务是重新开发这种外观：

我需要实现的是校准无线电的行为基于Type的选择：如果参数calibration设置为0（零），则禁用选项'Accredited'并自动检查第二个选项。

编辑：2017年10月19日

这会创建下拉列表，DD效果很好：

createSuggestInput(name) {
    const { id, value, labels } = this.props;
    const _t = this.props.intl.formatMessage;

    var options = [
      { value: 'one',   label: 'One',   calibration: '0' },
      { value: 'two',   label: 'Two ',  calibration: '1' },
      { value: 'three', label: 'Three', calibration: '0' },
      { value: 'four',  label: 'Four',  calibration: '1' },
    ];

    return  <Select.Creatable
                     name = {`${id}_${name}`}
                    value = {this.state.brandSelect}
              placeholder = {_t(translations.txtSuggest)}
                  options = {options}
                 onChange = {this._onChange.bind(this)}
                    label = {labels[name]}
                      key = {`${id}_${name}`}
        promptTextCreator = { (label) => _t(translations.txtCreate) + ' ' + label + _t(translations.txtCreateEnter) }
    />;
}

当选择的选项的校准值为ZERO时，我需要更新一组校准单选按钮，禁用“已认可”选项，同时选中第二个选项“未经认可”。

createRadioCalibration(name) {
    const { id, value, labels } = this.props;
    const _t = this.props.intl.formatMessage;

    const ACCREDITATION_TYPES = [
        [CALIBRATION_ACCREDITED, _t(messages.calibrationAccredited)],
        [CALIBRATION_NOT_ACCREDITED, _t(messages.calibrationNotAccredited)]
    ];

    return  <FormChoiceGroup
                    type = "radio"
                  values = {ACCREDITATION_TYPES.map(mapValueArray)}
                     key = {`${id}_${name}`}
                    name = {`${id}_${name}`}
                   value = {value[name]}
            handleChange = {this.handleFieldChangeFn(name)}
            />;
}

这两个呈现如下：

render () {

    const FIELDS = {
        [CALIBRATION]: this.createRadioCalibration(CALIBRATION),
        [TYPE]: this.createSuggestInput(TYPE),
    }; 

    return (
        <div className="repair-form-device repair-form-device-field-row">

            <div className="repair-form-device-id">
                {id + 1}
            </div>

            <div className="clearfix repair-form-device-content">

                <div className="">
                    { FIELDS[TYPE] }
                </div>

                <div className="">
                    <label>{_t(messages.repair)}</label>
                    { FIELDS[CALIBRATION] }
                </div>
.....

最后是_onChange函数：

_onChange(tool) {
    const { id } = this.props;
    this.setState({
        brandSelect: tool
    });
}

正如我之前所说，我坚持使用主要任务，即操作校准单选按钮。

我相信我可以在_onChange函数中更新其状态，但到目前为止我测试的所有内容都无处可去。

非常感谢您的耐心！

REACT.js选择禁用单选按钮并检查第二个选项

0 个答案: