在react本机中使用redux form单选按钮的示例

npm install redux redux-form

import React from 'react';
import { Field, reduxForm } from 'redux-form';

const RadioButton = ({ input, label, value }) => (
  <div>
    <label>
      <input {...input} type="radio" value={value} checked={input.value === value} />
      {label}
    </label>
  </div>
);

const MyForm = (props) => {
  const { handleSubmit } = props;

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>选择一个选项：</label>
        <Field name="option" component={RadioButton} value="option1" label="选项1" />
        <Field name="option" component={RadioButton} value="option2" label="选项2" />
        <Field name="option" component={RadioButton} value="option3" label="选项3" />
      </div>
      <button type="submit">提交</button>
    </form>
  );
};

const WrappedForm = reduxForm({
  form: 'myForm'
})(MyForm);

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';
import WrappedForm from './MyForm';

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <WrappedForm />
  </Provider>,
  document.getElementById('root')
);