有没有办法在 React-Native 中设置文本输入的最小长度

Question

我想在 React Native 中

设置文本输入的最小长度，但我在 React Native 教程中找不到最小长度的事件。

有没有办法设置文本输入的最小长度？

非常感谢。

Answer 1

您可以使用如下所示

_onPress

_onPress = () => {
        if (this.state.value.length < 5) { 
          Alert.alert('Alert', 'Please type more then 5 words');
        return;
      }
        this.props.onPress(this.ref._lastNativeText);
        this.ref.setNativeProps({ text: '' });
    }

Answer 2

正如评论，

添加 onChange 处理程序并验证最小长度的值

想法

• 您必须添加onChange处理程序才能进行自定义验证，因为没有直接的方法。
• 在此函数中，您可以检查长度并对其进行验证。

以下

代码还实现了以下行为：

• 输入可以接受任何内容，但minLength为 6。
• 如果输入无效，边框将更改为红色以表示错误。
  • 仅当输入未更改(即没有焦点(时才显示错误
  • 如果完全删除值，则不显示错误。仅当您有可选字段时。

样品小提琴

class MyInput extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
			value: '',
      isValid: true,
      hasFocus: false
    }
  }
  
  onChange(event) {
  	const value = event.target.value;
    const isValid = value.length >= (this.props.minLength || 0) ||value === ''
  	this.setState({ value, isValid })
  }
  
  onClick() {
  	this.setState({ hasFocus: true })
  }
  
  onBlur() {
  	this.setState({ hasFocus: false })
  }
  
  render() {
  	const { isValid, hasFocus } = this.state;
    return (
    <div>
      <input
        type='text'
        className={ isValid || hasFocus ? '' : 'error'}
        onChange={ this.onChange.bind(this) }
        onClick={ this.onClick.bind(this) }
        onBlur={ this.onBlur.bind(this) }
      />
    </div>
    )
  }
}
ReactDOM.render(<MyInput minLength={6} />, document.querySelector("#app"))

.error {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 3

onChangeText()函数，您可以执行以下操作：

const maxLengthInput = set your limit // 60;
const currentLength=this.state.text.length;
this.setState({
  textLength: maxLengthInput - currentLength,
  text:inputValue
});

因此，您可以在组件中使用the this.state.textLength。

Answer 4

minLength prop 现在是 React Native 的一部分：在代码中使用以下内容。

<TextInput value={this.state.text} minLength={4} />

你很好！