Question

使用redux-form的组件Field，我试图显示输入中写入的字符串的长度。但似乎onChange永远不会触发handleChange函数。这是组件：

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

var  max_chars = 160;
var LimitedCharsField = React.createClass({
    getInitialState: function() {
        return {
            chars_left: max_chars
        };
    },
    handleChange(event) {
        var input = event.target.value;
        this.setState({
            chars_left: max_chars - input.length
        });
    },
    render: function() {
        return (
            <div>
                <Field name="short_description" id="short_description" component={this.props.renderSmallTextField} type="text"
                       label="Qualification du site" onChange={this.handleChange.bind(this)} maxLength={max_chars}/>
                <br/>

                <small id="short_description_countdown" >{this.state.chars_left} caractères restants</small>

            </div>
        );
    }
});


export default LimitedCharsField;

我正在调用父组件，这是主要形式：

<LimitedCharsField renderSmallTextField={renderSmallTextField}/>

该组件确实出现在表单中，但handleChange根本不会发射。

为了让函数handleChange被触发，应该怎么做？

非常感谢。

编辑：在renderSmallTextField下面

const renderSmallTextField = ({input, label, meta:{touched, error}, ...custom}) => (
    <TextField
        hintText={label}
        errorText={touched && error}
        {...input}
        {...custom}
    />
);

Answer 1

我想这是因为onChange道具没有正确传递。但是，如果没有看到renderSmallTextField组件的代码，就无法肯定地说。尝试将component="input"设置为简单测试。如果handleChange方法开始触发，则表示您已找到问题。

道具＆＃34; onChange＆＃34;在Field Component中没有触发给定的函数

1 个答案: