Question

我想从第二种形式获取值。它呈现一些选择选项，当我点击删除按钮时，它只返回一个空对象。如何从选项中获取值。使用正常输入字段，它将使用名称传递值。

例如，如果我有一个输入类型=“text”name =“email”，当我提交这个时，它会给我一个像这样的对象：

{email: "some string"}

以下是代码：

import React , { Component } from 'react';
// import * as actions from '../actions';
import { reduxForm, Field } from 'redux-form';
import {connect} from 'react-redux';
import {postBooks, deleteBook} from '../../actions/booksActions';

class BooksForm extends Component {
  renderField(field) {
    const { meta: {touched, error} } = field;
    const className = `form-group ${touched && error ? 'has-danger' : ''}`;

    return (
      <div className={className}>
        <label className="control-label"><strong>{field.label}:</strong></label>
        <input
          className="form-control"
          type={field.type}
          {...field.input}
        />
        <div className="text-help">
          { touched ? error : ''}
        </div>
      </div>
    );
  }

  renderSelectField(field) {
    const bookList = _.map(field.options, (book) => {
      return (
        <option key={book._id}>{book.title}</option>
      )
    });

    return(
      <div className="form-group">
        <label htmlFor="sel1" className="control-label">{field.label}</label>
        <select className="form-control" id="sel1">
          {bookList}
        </select>
      </div>
    );
  }

  onSubmit(values) {
    this.props.postBooks(values);
  }

  onDelete(values) {
    console.log(values);
  }

  render() {
    const {handleSubmit} = this.props;

    return (
      <div>
      <div className="well">
      <form className="panel" onSubmit={handleSubmit(this.onSubmit.bind(this))}>
        <div className="panel-body">
        <Field
          label="Title"
          name="title"
          type="text"
          component={this.renderField}
        />
        <Field
          label="Description"
          name="description"
          type="text"
          component={this.renderField}
        />
        <Field
          label="Price"
          name="price"
          type="text"
          component={this.renderField}
        />
        <button className="btn btn-primary">Save Book</button>
        </div>
      </form>
      </div>
      <form className="Panel" onSubmit={handleSubmit(this.onDelete.bind(this))}>
        <div className="panel-body">
          <Field
            label="Select Book"
            name="selectedBook"
            options={this.props.books}
            component={this.renderSelectField}
          />
          <button className="btn btn-danger">Delete</button>
        </div>
      </form>
      </div>
    );
  }
}

function validate(values) {
  const errors = {};

  return errors;
}

function mapStateToProps(state) {
  return {
    books: state.books
  }
}

export default reduxForm({
  validate,
  form: 'bookForm'
})(connect(mapStateToProps, {postBooks, deleteBook})(BooksForm));

Answer 1

在renderSelectField中，我需要将{... field.input}添加到select中，以允许redux-form监视它。

<select className="form-control" id="sel1" {...field.input}>

如何从redux-form中的select / option字段中获取值？

1 个答案: