Блог

Главная - Вопросы по программированию - входное значение, не превышающее при вводе

входное значение, не превышающее при вводе

#reactjs

#reactjs

Вопрос:

Мне пришлось добавить проверку в поле ввода, поэтому я использовал это:

 <input
  type="text"
  name={this.state.editBookData.title}
  value={this.state.toEditBookData.title}
  onChange={e => {
    let { editBookData } = this.state;
    editBookData.title = e.target.value;
    this.setState({ [editBookData.title]: e.target.value });
  }}
/>

Здесь строка this.setState({[editBookData.title]: e.target.value}); останавливает любой ввод при вводе.

editBookData устанавливается в состояние, подобное этому:

 constructor(props) {
  super(props);
  this.state = {
    toEditBookData: {
      id: 0,
      title: "",
      rating: ""
    }
  };
}

Также, когда я проверяю в консоли, когда я ввожу что-либо во входных данных, свойство name принимает только 1 символ и перестает добавлять какие-либо другие символы.
пожалуйста, дайте мне знать, почему я не могу ввести какие-либо буквы. Спасибо

Комментарии:

1. Это происходит потому, что вы устанавливаете editBookData.title, но ваше поле значения считывается из toEditBookData.

2. Какой-либо из ответов сработал для вас? Рассмотрите возможность принятия одного из них , если это так.

Ответ №1:

Вы не хотите добавлять новое свойство в состояние с тем же именем, что и editBookData.title , но вместо этого обновите toEditBookData объект новым названием, поскольку именно оно используется как value для ввода.

 <input
  type="text"
  name={this.state.editBookData.title}
  value={this.state.toEditBookData.title}
  onChange={e => {
    const { value } = e.target;
    this.setState(prevState => {
      return {
        toEditBookData: { ...prevState.toEditBookData, title: value }
      };
    });
  }}
/>

Ответ №2:

Я не уверен, что вам нужны два объекта здесь. Это должно сработать.

 class App extends React.Component {
  state = {
    id: 0,
    title: "",
    rating: "",
    errors: {}
  };

  handleChange = e => {
    const { name, value } = e.target;
    const { errors } = this.state;

    errors[name] = !!!value;
    this.setState({ [name]: value, errors });
  };

  render() {
    const { title, errors } = this.state;

    return (
      <div className="App">
        <label htmlFor="title">Title: </label>
        <br />
        <input
          type="text"
          name="title"
          value={title}
          onChange={this.handleChange}
        />
        <br />
        {errors.title amp;amp; (
          <span style={{ color: "red" }}>Title is a required field</span>
        )}
      </div>
    );
  }
}