ReactJS OnKeyPress для запуска нажатия кнопки

Я новичок в ReactJS и просто пытаюсь делать небольшие вещи, чтобы понять больше.

Мне было интересно, может ли OnKeyPress вызывать нажатие кнопки. Я видел несколько похожих вопросов, но OnKeyPress вызывал просто console.log или предупреждение. Поэтому я не был уверен, как вызвать нажатие кнопки.

Это то, что у меня есть до сих пор:

class Form extends React.Component {
  onButtonPress = (e) => {
    // this is just an example of what happens when the button is pressed.
    this.setState({isClicked: true});
  }

  keyPress = (event) => {
    if (event.key == 'Enter'){
      // How would I trigger the button that is in the render? I have this so far.
      this.onButtonPress();
    }
  }

  render() {
    return (
      <div>
        <div className="fieldForm">
          <input
            value={name}
            type="name"
            onKeyPress={this.keyPress}
          />
        </div>
        <Button onClick={this.onButtonPress}>Submit</Button>
      </div>
    )
  }
}

Обратите внимание, что я не включил сюда все, например, конструктор, свойства или атрибуты объекта состояния.

Цель этого состоит в том, чтобы сделать вид, что кнопка нажата. Когда кнопка нажата, на кнопке отображается небольшой знак загрузки. Я хочу, чтобы то же самое произошло, если бы я нажал клавишу ввода (со знаком загрузки на кнопке, поэтому я хочу, чтобы кнопка была нажата).

Это возможно?


reactjs javascript html onclick onkeypress
person chakolatemilk    schedule 29.08.2017    source источник
comment
почти уверен, что значение event.key все в нижнем регистре   -  person Derek    schedule 30.08.2017

Ответы (2)


arrow_upward
4
arrow_downward

Вы не должны программно запускать события DOM, если только у вас нет особых потребностей.

Оба onKeyPress и onClick являются обработчиками событий, вы можете делать все, что хотите, когда происходит событие. Я бы просто вызвал функцию, которая устанавливает желаемое состояние от обоих обработчиков.

Вот пример:

class Form extends React.Component {
  handleFormSubmit = () => {
    this.setState({ isClicked: true });
  };

  handleButtonPress = () => {
    this.handleFormSubmit();
  };

  handleKeyPress = event => {
    if (event.key == 'Enter') {
      this.handleFormSubmit();
    }
  };

  render() {
    return (
      <div>
        <div className="fieldForm">
          <input value={name} type="name" onKeyPress={this.handleKeyPress} />
        </div>
        <Button onClick={this.handleButtonPress} loading={this.state.Load}>
          Submit
        </Button>
      </div>
    );
  }
}
person elas    schedule 29.08.2017
comment
Когда вы говорите о конкретных потребностях, что это повлечет за собой? В какой момент я могу инициировать события DOM? - person chakolatemilk; 30.08.2017
comment
Например, если вы используете стороннюю библиотеку, которая реагирует только на события DOM. В любом случае, что-то подобное должно быть редкостью. Я бы сделал это, только если бы это был единственный выбор. - person elas; 30.08.2017
comment
@chakolatemilk прочитал о refs< /а>. - person Soorena; 30.08.2017

arrow_upward
3
arrow_downward

В случае, если у вас нет другого пути и вы должны щелкнуть этот элемент по какой-то неясной причине и методу, который elas не работает для вас. попробуй это:

  onButtonPress = (e) => {
    console.log('hi hi')
  }

  handleKeyPress = (event) => {
    if (event.key === 'Enter') {
      this.refs.but.click()
    }
  }

  render () {
    return (
      <Layout>
        <div>
          <div className="fieldForm">
            <input
              value={'name'}
              type="name"
              onKeyPress={(e) => this.handleKeyPress(e)}
            />
          </div>
          <Button onClick={this.onButtonPress} ref="but">Submit</Button>
        </div>
      </Layout>
    )
  }
person Soorena    schedule 30.08.2017
comment
Если вам интересно, почему я прошу вас сначала попробовать другие методы, это потому, что я использую refs - не очень мудрый шаг в реакции, и это как-то анти-шаблон, поскольку вы манипулируете реальным DOM. - person Soorena; 30.08.2017