Реагируйте неправильно и правильно с элементами формы - PullRequest
Новая
       9

Реагируйте неправильно и правильно с элементами формы

0 голосов
/ 22 января 2020

Hyall

Можете ли вы указать на плохие практики / ошибки в приведенном ниже коде? 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "default title"
    };
    this.inputTxt = this.state.title;

    this.myRef = React.createRef();
  }

  componentDidMount() {
    this.myRef.current.value = this.inputTxt;
  }

  handleSubmit = e => {
    e.preventDefault();
    console.log("submitted");
    this.setState({ ...this.state, title: this.inputTxt });
  };

  handleInput = e => {
    this.inputTxt = e.target.value;
  };

  render() {
    return (
      <>
        <div>{this.state.title}</div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            onChange={this.handleInput}
            ref={this.myRef}
          ></input>
          <button type="submit">Save</button>
          <button type="reset">Reset</button>
        </form>
      </>
    );
  }
}

И некоторые специальные вопросы:

  1. Можно ли использовать свойства this.somevar класса компонента для хранения значений переменных? как избежать коллизии имен?

  2. нормально ли использовать refs для установки значения ввода?

  3. , если я хочу установить onChange и привязку значения реактивной переменной в одном элементе управления, она замерзнет? как получить [(ngModel)] Angular -подобный контроль над элементом ввода?

1 Ответ

0 голосов
/ 22 января 2020

Кажется, ты слишком усложняешь вещи. Я не вижу необходимости в рефери здесь. Я не думаю, что установка свойства класса вызовет повторную визуализацию, поэтому этот способ управления вводом может вообще не работать, несмотря на то, что он не является наилучшей практикой.

Просто используйте состояние в качестве значения и обновляйте состояние при изменении. Чтобы сохранить гибкость, используйте имя входа в качестве ключа состояния. Примерно так: 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "default title"
    };
  }

  handleSubmit = e => {
    e.preventDefault();
    console.log("submitted");
    // Not sure if thats what you're looking for..
    // Also: no need to do {...this.state, }. setState does a merge, not overwrite
    this.setState({ title: this.state.input1 }); 
  };

  handleChange = e => {
    // Use e.target.name as the computed property name, 
    // so it can be used for infinite number of inputs
    this.setState({[e.target.name]: e.target.value});
  };

  render() {
    return (
      <>
        <div>{this.state.title}</div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            name="input1" // Give it a unique name for setting state
            value={this.state.input1} // Specify the value instead of using a ref
            onChange={this.handleChange}
          ></input>
          <button type="submit">Save</button>
          <button type="reset">Reset</button>
        </form>
      </>
    );
  }
}

Вот ссылка на документацию о реагировании на refs . Основные рекомендуемые сценарии использования:

  • Управление фокусировкой, выделением текста или воспроизведением мультимедиа.
  • Запуск обязательных анимаций.
  • Интеграция со сторонним DOM библиотеки. Что я не верю, применимо, здесь. Поэтому я бы не рекомендовал использовать их здесь.
...