javascript - 如何在 React 中触发 onBlur 事件？

Question

我有一个输入字段值，我想在模糊上设置格式，这是我的代码的样子:

组件:

  <Input
    onBlur={this.formatEndpoint}
  />

功能:

  formatEndpoint() {
    let endpoint = this.state.inputEndpoint;

    endpoint = endpoint.replace(/\s/g, '').replace(/\/+$/, '');

    if (endpoint.slice(-1) === '/') {
      endpoint = endpoint.substring(0, endpoint.length - 1);
    }

    console.log('anything');
  }

为什么连 console.log() 都不能在 onBlur 上工作？谢谢。

Answer 1

多亏了评论，我才明白了。我必须向 Input 添加一个 onBlur 属性，如下所示:

export default class Input extends React.Component {
  constructor() {
    super();
    this.handleBlur = this.handleBlur.bind(this);
  }

  handleBlur() {
    const { onBlur } = this.props;
    onBlur();
  }

  render() {
    return <input onBlur={this.handleBlur} />
  }
}

Input.propTypes = {
  onBlur: PropTypes.func,
};

Input.defaultProps = {
  onBlur: () => {},
};