redux-form textarea值不更新

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反映出keypress。

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>
);