Question

如果单选按钮的值从默认值更改，我想显示一个保存按钮。可以说默认值为“红色”。用户从红色变为绿色，我想显示一个保存按钮。可以说，用户在保存绿色选项之前再次更改为红色，然后我不想显示它。

import React, { Component } from 'react';
import PropTypes from 'prop-types';

/*  Renders a radio group */
class Radio extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: props.selected
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange(ev) {
    this.setState({ selected: ev.target.value });
    this.props.onChange(ev);
  }

  render() {
    const {
      options, inputClasses, labelClasses, hiddenLabel, name, inline
    } = this.props;
    return (
      <div className={`radio-group ${inline ? 'inline-radio-group' : ''}`}>
        {
          options.map((option) => {
            const {
              id, value, label
            } = option;
            return (
              <div className="radio" key={`${id}`}>
                <input
                  type="radio" id={id} className={`radio-input ${inputClasses}`}
                  name={name} value={value} onChange={this.onChange}
                  checked={this.state.selected === value ? 'checked' : ''}
                />
                <label htmlFor={id} className={`radio-label ${labelClasses} ${hiddenLabel ? 'sr-only' : ''}`} >
                  {label}
                </label>
              </div>);
          })
          }
      </div>
    );
  }
}

Radio.propTypes = {
  options: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
    value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]).isRequired,
    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
  })).isRequired,

  name: PropTypes.string.isRequired,

  selected: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),

  inputClasses: PropTypes.string,

  labelClasses: PropTypes.string,

  hiddenLabel: PropTypes.bool,

  onChange: PropTypes.func,

  inline: PropTypes.bool
};

Radio.defaultProps = {
  selected: '',
  inputClasses: '',
  labelClasses: '',
  hiddenLabel: false,
  inline: false,
  onChange: () => { }
};

export default Radio;

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import Radio from '/Radio';

const DOContainer = () => {
  const options = [
    {
      id: 'red',
      label: 'Red',
      value: 'red'
    },
    {
      id: 'green',
      label: 'Green',
      value: 'green'
    }
  ];

  return (
    <Fragment>
      <div className="do-container">
        <h2>choose a color</h2>
        <div>
          <p>color choose</p>
          <Radio
            options={options} name="do" inline
            selected="red"
          />
        </div>
      </div>
    </Fragment>
  );
};

export default DOContainer;

我已经更新了我的Radio组件。

Answer 1

您可以提供并支持proc.StartInfo.FileName = "D:\\Program Files (x86)\\Java\\jdk1.8.0_73\\bin\\java.exe";组件的onChange回调。

因此，在您的<Radio />中将添加一个处理程序，您将在其中获得<DOContainer />单选值并将其保持在状态（应将DOContainer转换为有状态组件）。具有selected和selected的值，您可以比较它们并有条件地显示default。

类似的事情将是<Button />渲染方法的实现：

<DOContainer />

反应-在默认值更改时执行功能

1 个答案: