redux-form textarea value wird nicht aktualisiert

Question

Ich habe eine Redux-Form mit zwei Eingabefeldern und einem Textfeld. Die Eingabefeldwerte werden für jeden Tastendruck aktualisiert und die Validierungsfunktion erhält die richtigen Werte. Die Textartenschlüsseländerungen werden jedoch in der Validierungsfunktion nicht berücksichtigt. Irgendeine Hilfe ? Der gesamte Code ist:

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

Die console.log Funktionsaufrufe in der Prüf-Funktion für die beiden Eingabefelder auf jedem Tastendruck den richtigen Wert zurück, aber nicht der Wert für die content.

Wenn ich die Textfeldfeldzeile mit der folgenden Zeile ersetzen, wird der Inhaltswert korrekt bei jedem Tastendruck im Textbereich protokolliert (aber ich kann nicht validieren).

Aktualisierte Zeile: <Field name="content" component={textarea} {...content} />, die in der console.log zum Ausdruck kommt, Keypress zu reflektieren.

Answer 1

Sieht aus wie ein klassischer Fehler beim Suchen und Ersetzen. :-)

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

Da ist dein Problem. Der Schlüssel ist input. Versuchen Sie:

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