Question

最初渲染React时，会为Title和Content字段调用Component方法。但是，虽然Title字段中的其他输入更改会调用renderField方法，但Content字段似乎不会这样做。这反映在控制台日志中，其中初始组件负载产生2＆＃34;输入已更改＆＃34;并且对于标题的其他更改，＆＃34;输入更改＆＃34;打印，但在对内容字段进行更改时不会发生响应。发生了什么事？

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

class PostNew extends Component {

    renderField(field) {
        console.log('input changed')
        return(
            <div>
                <label>{field.label}</label>
                <input
                    type="text"
                    {...field.input}
                />
            </div>
        );
    }

    render() {
        return(
            <form>
                <Field
                    label="Title"
                    name="title"
                    component={this.renderField}
                />
                <Field
                    label="Content"
                    name="content"
                    component={this.renderField}
                />
            </form>
        )
    }
}


export default reduxForm({
    form: 'PostsNewForm' // form property is the name of the form
})(PostNew);

Answer 1

好的，我能够复制你的问题。问题是redux-form并不是即插即用。您需要将它添加到根减速器中，如下所示：

//src/reducers/index.js

import { combineReducers } from 'redux';
import {reducer as form} from 'redux-form';

const rootReducer = combineReducers({
  state: (state = {}) => state,
  form
});

export default rootReducer;

一旦我添加了表单字段，就像我预期的那样。我已经上传了一份Github项目的副本，其中有一个工作示例：

https://github.com/hellojebus/so-Answer

Answer 2

对于遇到与我类似问题的人。问题的根源最终来自redux-form软件包根本没有安装的事实。所以要么使用纱线安装redux-form或尝试npm，但要确保检查npm的工作原理。

React Js如何从两个React Redux字段中调用相同的函数？

2 个答案: