최대 길이가 작동하지 않음 React Js

최대 길이가 작동하지 않음 React Js

React에 대한 정보는 있지만maxlength동작하지 않습니다.이 문제를 해결할 방법을 아는 사람 있나요?

이것은 handle Change Input 입니다.

 handleChangeInput(input) {
    this.setState({
        ...this.state,
        form: {
            ...this.state.form,
            [input.target.name]: input.target.value
        }
    })
}

제 의견은 이렇습니다.

<div className="input-field col s12 m6 l6">
    <input onChange={this.handleChangeInput} value={this.state.form.message} type="text" className="phone validate" name="phone" maxlength="11"/>
    <label for="telefone">Telefone</label>
</div>

속성 및 속성 이름은 일반적으로 다음과 같습니다.camelCase리액트에서는maxLength작동하다.

<input
  onChange={this.handleChangeInput}
  value={this.state.form.message}
  type="text"
  className="phone validate"
  name="phone"
  maxLength="11"
/>

단, 이 옵션을 덮어쓸 수 있습니다.value보다 길다maxLength. 이 문제를 해결하려면 , 의 길이를 체크하는 것 밖에 없습니다.value콜백에 저장하여 잘라냅니다.

예

class App extends React.Component {
  state = { form: { message: "" } };

  handleChangeInput = event => {
    const { value, maxLength } = event.target;
    const message = value.slice(0, maxLength);

    this.setState({
      form: {
        message
      }
    });
  };

  render() {
    return (
      <input
        onChange={this.handleChangeInput}
        value={this.state.form.message}
        type="text"
        className="phone validate"
        name="phone"
        maxLength="11"
      />
    );
  }
}

max Length가 작동하려면 입력이 'text'여야 합니다(대부분의 사용자는 숫자를 입력할 수 있습니다).

max Length 값을 숫자로 전달해야 합니다.

<input
  onChange={this.handleChangeInput}
  value={this.state.form.message}
  type="text"
  className="phone validate"
  name="phone"
  maxLength={11}
/>

inputProps = {{maxLength:6}}
variant="outlined"

handleOnChange 기능에서 다음과 같이 수행합니다.

 handlePasswordChange = (e) => {
    if(e.target.value <= 11){
    this.setState({
      [e.target.name]: e.target.value
    });
   }
  };

<input
    id="ZIPCode"
    className="form-control"
    type="text"
    maxLength={10} // this is the important line
></input>

React는 camelCased html 속성을 사용하기 때문에maxlength그렇다면maxLength

입력 타입은 다음과 같습니다.number, 이 코드는 동작합니다.

handlePhone(object) {
    if (object.target.value.length > object.target.maxLength) {
      object.target.value = object.target.value.slice(0, object.target.maxLength)
      this.setState({ phone: object.target.value });
    }
}

<input
    placeholder="Phone Number"
    onChange={this.handlePhone}
    type = "number" maxLength = "10"
/>

reactstrap 입력을 사용하는 모든 사용자는 다른 속성(예: colSpan)과 마찬가지로 문자열 대신 camelCase 이름 지정과 숫자 전달(예: maxLength={250})이 필요합니다.나는 끈을 건네주는 것이 효과가 있다는 것을 알았지만 리액트는 그것에 대해 불평할 것이다.

언급URL : https://stackoverflow.com/questions/51161510/maxlength-does-not-work-react-js