如何显示 redux 表单渲染中剩余的字符数？答案

【问题标题】：How to show how many characters left in redux form render?如何显示 redux 表单渲染中剩余的字符数？
【发布时间】：2018-11-04 02:53:31
【问题描述】：

我尝试显示在我提交的渲染中还有多少字符需要输入，但我得到了_this.setState is not a function. (in '_this.setState({value: value})','_this.setState' is undefined)

这是我的渲染

const renderField = ({ label, keyboardType, name, meta: { touched, error }, input: { onChange, ...restInput } }) => {
  this.state = {
    value: ''
  }
  return (
    <View style={{ flexDirection: 'column', height: 70, alignItems: 'flex-start' }}>
      <View style={{ flexDirection: 'row', alignItems: 'center', borderColor: 'black', borderBottomWidth: 1, }}>
        <TextInput style={{ height: 37, width: 295, paddingLeft: 10, fontSize: 20, height: 350, justifyContent: "flex-start" }}
          keyboardType={keyboardType} value={this.state.value} onChangeText={(value) => this.setState({ value })} {...restInput}
          placeholder={label} numberOfLines={10} multiline={true} maxLength={100}
        >
        </TextInput>
      </View>
      <Text>
        Characters Left: {this.state.value.length}/100
      </Text>
      {touched && ((error && <Text style={{ color: 'red', }}>{error}</Text>))}
    </View>);
};

【问题讨论】：

标签： react-native redux redux-form

【解决方案1】：

您已将renderField 定义为functional component，根据定义，功能组件为stateless。要使用state，您只需将其更改为class component。

这里是official link，用于将功能组件转换为类组件。

希望这会有所帮助！

【讨论】：