Question

我有一个带有两个输入字段和一个textarea的redux表单。为每个按键更新输入字段值，并且验证功能获得正确的值。但textarea密钥更改不会反映在validate函数中。有帮助吗？整个代码是：

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

import { createPost } from '../actions/index';

const renderInput = ({ input, label, type, meta: { touched, error, warning } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type}/>
      {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
    </div>
  </div>
);

const renderTextArea = ({textarea, meta: { touched, error, warning }}) => (
    <div>
        <label>Content</label>
        <div>
            <span>{textarea}</span>
            <textarea {...textarea} placeholder="Content" rows="10" cols="40"></textarea>
            {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
        </div>
    </div>
);

class PostsNew extends Component {

    render() {
        const { handleSubmit, title, categories, content } = this.props;
        return (
            <form onSubmit={handleSubmit(createPost)}>
                <Field name="title" component={renderInput} label="Title" type="text" {...title} />
                <Field name="categories" component={renderInput} label="Categories" type="text" {...categories} />
                <Field name="content" component={renderTextArea} {...content} />
                <button type="submit">Submit</button>
            </form>
        );
    }
}

const validate = values => {
    const errors = {}
    if (!values.title) {
        errors.title = 'Required';
    }
    if (!values.categories) {
        errors.categories = 'Required';
    }
    console.log("######", values);
    console.log("@@@@", values.content);
    if (!values.content) {
        errors.content = 'Content cannot be empty';
    } else if (values.content.length < 3) {
        errors.content = 'Content should be more than 3 characters';
    }

    return errors;
}

export default reduxForm({
    form: 'NewPostForm',
    validate
})(PostsNew);

validate函数中的console.log函数调用返回每个按键上两个输入字段的正确值，但不返回content的值。

如果我用以下行替换textarea字段行，则会在文本区域中的每个按键上正确记录内容值（但我无法验证）。

更新了行：<Field name="content" component={textarea} {...content} />，导致console.log反映了按键。

redux-form textarea值不更新

0 个答案: