是否有一种方法可以在React中设置TextInput的最小长度？

Question

我想在Reacti原住民中设置textInput的最小长度，但是我在Reve原住民教程中找不到最小长度的事件。

有任何方法来设置textInput的最小长度吗？

非常感谢。

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。