Question

我想在React Native中设置textInput的最小长度，但是我在React Native教程中找不到最小长度的事件。

有什么方法可以设置textInput的最小长度吗？

非常感谢。

Answer 1

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 2

如所评论，

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

想法

由于没有直接方法，您将必须添加onChange处理程序以进行自定义验证。
在此功能中，您可以检查长度并进行验证。

以下代码还实现了以下行为：

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

Sample Fiddle

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

maxLength道具现在是React Native的一部分：在您的代码中使用以下内容。

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

你很好！

Answer 4

您可以像下面一样使用_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: '' });
    }

有没有办法在React-Native中设置TextInput的最小长度？

4 个答案:

想法