redux-form textarea 值不更新

Question

我有一个包含两个输入字段和一个文本区域的 redux 表单。每次按键都会更新输入字段值，并且验证函数会获得正确的值。但是 textarea keychanges 没有反映在 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);

console.log 函数在验证函数中调用 return 每次按键时两个输入字段的正确值，而不是 content.

的值

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

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

Answer 1

看起来像是典型的搜索和替换错误。 :-)

const renderTextArea = ({textarea, meta: { touched, error, warning }})
                         ^^^^^^^^

这是你的问题。关键是input。尝试：

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

redux-form textarea 值不更新

redux-form textarea value not updating

javascript

reactjs

redux-form