按 Enter 键后调用 onChange 事件

Question

我是 Bootstrap 的新手，遇到了这个问题。 我有一个输入字段，只要我输入一个数字，就会调用onChange中的 function，但我希望在输入完整数字后按下“Enter”时调用它。 验证 function 的相同问题 - 它调用得太早了。

var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
  //bsStyle: this.validationInputFactor(),
  placeholder: this.initialFactor,
  className: "input-block-level",
  onChange: this.handleInput,
  block: true,
  addonBefore: '%',
  ref:'input',
  hasFeedback: true
});

Answer 1

根据React Doc ，您可以监听键盘事件，例如onKeyPress或onKeyUp ，而不是onChange 。

var Input = React.createClass({
  render: function () {
    return <input type="text" onKeyDown={this._handleKeyDown} />;
  },
  _handleKeyDown: function(e) {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }
});

更新：使用 React.Component

这是使用 React.Component 做同样事情的代码

class Input extends React.Component {
  _handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }

  render() {
    return <input type="text" onKeyDown={this._handleKeyDown} />
  }
}

这是jsfiddle 。

更新 2：使用功能组件

const Input = () => {
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      console.log('do validate')
    }
  }

  return <input type="text" onKeyDown={handleKeyDown} />
}

Answer 2

您可以直接在输入字段上使用 onKeyPress。 onChange 函数在每次输入字段更改时更改状态值，按下 Enter 后，它将调用函数 search()。

<input
    type="text"
    placeholder="Search..."
    onChange={event => {this.setState({query: event.target.value})}}
    onKeyPress={event => {
                if (event.key === 'Enter') {
                  this.search()
                }
              }}
/>

Answer 3

当焦点在表单控件（输入）上时按Enter通常会触发表单本身（而不是输入）上的submit (onSubmit) 事件，因此您可以将this.handleInput绑定到表单 onSubmit。

或者，您可以将其绑定到input上的blur (onBlur) 事件，该事件在移除焦点时发生（例如，跳转到下一个可以获得焦点的元素）

Answer 4

您可以使用event.key

 function Input({onKeyPress}) { return ( <div> <h2>Input</h2> <input type="text" onKeyPress={onKeyPress}/> </div> ) } class Form extends React.Component { state = {value:""} handleKeyPress = (e) => { if (e.key === 'Enter') { this.setState({value:e.target.value}) } } render() { return ( <section> <Input onKeyPress={this.handleKeyPress}/> <br/> <output>{this.state.value}</output> </section> ); } } ReactDOM.render( <Form />, document.getElementById("react") )

 <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="react"></div>

Answer 5

反应用户，这是完整性的答案。

反应版本 16.4.2

您要么想为每次击键更新，要么仅在提交时获取值。 将关键事件添加到组件中是可行的，但官方文档中推荐了替代方法。

受控与非受控组件

受控

从文档 - 表单和受控组件：

在 HTML 中，诸如 input、textarea 和 select 之类的表单元素通常会维护自己的状态并根据用户输入进行更新。 在 React 中，可变状态通常保存在组件的 state 属性中，并且仅使用 setState() 进行更新。

我们可以通过使 React 状态成为“单一的事实来源”来将两者结合起来。 然后呈现表单的 React 组件还控制后续用户输入时该表单中发生的事情。 以这种方式由 React 控制其值的输入表单元素称为“受控组件”。

如果您使用受控组件，则必须在每次更改值时保持状态更新。 为此，您将事件处理程序绑定到组件。 在文档的示例中，通常是 onChange 事件。

例子：

1) 在构造函数中绑定事件处理程序（值保持在状态中）

constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
}

2) 创建处理函数

handleChange(event) {
    this.setState({value: event.target.value});
}

3）创建表单提交函数（值取自状态）

handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
}

4) 渲染

<form onSubmit={this.handleSubmit}>
    <label>
      Name:
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    </label>
    <input type="submit" value="Submit" />
</form>

如果您使用受控组件，您的handleChange函数将始终被触发，以更新并保持正确的状态。 状态将始终具有更新的值，并且在提交表单时，将从状态中获取该值。 如果您的表单很长，这可能是个骗局，因为您必须为每个组件创建一个函数，或者编写一个简单的函数来处理每个组件的值变化。

不受控制

来自文档 - 不受控制的组件

在大多数情况下，我们建议使用受控组件来实现表单。 在受控组件中，表单数据由 React 组件处理。 另一种选择是不受控制的组件，其中表单数据由 DOM 本身处理。

要编写不受控制的组件，您可以使用 ref 从 DOM 获取表单值，而不是为每个状态更新编写事件处理程序。

这里的主要区别在于您不使用onChange函数，而是使用表单的onSubmit来获取值，并在必要时进行验证。

例子：

1) 绑定事件处理程序并在构造函数中创建 ref 以输入（状态中没有保留值）

constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
}

2）创建表单提交函数（取自DOM组件的值）

handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
}

3) 渲染

<form onSubmit={this.handleSubmit}>
    <label>
      Name:
      <input type="text" ref={this.input} />
    </label>
    <input type="submit" value="Submit" />
</form>

如果使用不受控制的组件，则无需绑定handleChange函数。 提交表单时，将从 DOM 中获取值，此时可以进行必要的验证。 也无需为任何输入组件创建任何处理程序函数。

你的问题

现在，对于您的问题：

...我希望在输入整数后按“Enter”时调用它

如果要实现此目的，请使用不受控制的组件。 如果没有必要，不要创建 onChange 处理程序。 enter键将提交表单并触发handleSubmit函数。

你需要做的改变：

删除元素中的 onChange 调用

var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
    //    bsStyle: this.validationInputFactor(),
    placeholder: this.initialFactor,
    className: "input-block-level",
    // onChange: this.handleInput,
    block: true,
    addonBefore: '%',
    ref:'input',
    hasFeedback: true
});

处理表单提交并验证您的输入。 您需要从表单提交函数中的元素中获取值，然后进行验证。 确保在构造函数中创建对元素的引用。

  handleSubmit(event) {
      // Get value of input field
      let value = this.input.current.value;
      event.preventDefault();
      // Validate 'value' and submit using your own api or something
  }

使用不受控制的组件的示例：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    // bind submit function
    this.handleSubmit = this.handleSubmit.bind(this);
    // create reference to input field
    this.input = React.createRef();
  }

  handleSubmit(event) {
    // Get value of input field
    let value = this.input.current.value;
    console.log('value in input field: ' + value );
    event.preventDefault();
    // Validate 'value' and submit using your own api or something
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);

Answer 6

你也可以写一个像这样的小包装函数

const onEnter = (event, callback) => event.key === 'Enter' && callback()

然后在您的输入上使用它

<input 
    type="text" 
    placeholder="Title of todo" 
    onChange={e => setName(e.target.value)}
    onKeyPress={e => onEnter(e, addItem)}/>

Answer 7

阻止 Enter 在输入上提交表单的示例，在我的情况下是谷歌地图位置自动完成输入

<input
  ref={addressInputRef}
  type="text"
  name="event[location]"
  className="w-full"
  defaultValue={location}
  onChange={(value) => setLocation(value)}
  onKeyDown={(e) => {
    if (e.code === "Enter") {
      e.preventDefault()
    }
  }}
/>

Answer 8

下面是使用基于类的组件的一个常见用例：父组件提供回调函数，子组件渲染输入框，当用户按下 Enter 键时，我们将用户的输入传递给父组件。

class ParentComponent extends React.Component {
  processInput(value) {
    alert('Parent got the input: '+value);
  }

  render() {
    return (
      <div>
        <ChildComponent handleInput={(value) => this.processInput(value)} />
      </div>
    )
  }
}

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleKeyDown = this.handleKeyDown.bind(this);
  }

  handleKeyDown(e) {
    if (e.key === 'Enter') {
      this.props.handleInput(e.target.value);
    }
  }

  render() {
    return (
      <div>
        <input onKeyDown={this.handleKeyDown} />
      </div>
    )
  }      
}

Answer 9

我更喜欢onKeyUp因为它只在释放键时触发。 另一方面，如果用户出于某种原因按住键， onKeyDown将多次触发。 例如，当侦听“按下” Enter键以发出网络请求时，您不希望多次触发，因为它可能很昂贵。

// handler could be passed as a prop
<input type="text" onKeyUp={handleKeyPress} />

handleKeyPress(e) {
if (e.key === 'Enter') {
  // do whatever
}

}

此外，远离keyCode因为它会在一段时间内被弃用。

Answer 10

const [value, setValue] = useState("");

const handleOnChange = (e) => {
    setValue(e.target.value);
};

const handleSubmit = (e) => {
    e.preventDefault();
    addTodoItem(value.trim());
    setValue("");
};

return (
    <form onSubmit={handleSubmit}>
        <input value={value} onChange={handleOnChange}></input>
    </form>
);

Answer 11

//You can use onkeyup directly on input field

    const inputField = document.querySelector("input");
        inputField.addEventListener("keyup", e => {
         
            if (e.key == "Enter") {
                 console.log("hello");
            }
        });