未调用 reactjs 中 onKeyPress 下的函数调用

Question

在下面的代码中，当我输入搜索字符串并按回车键时，this 变得未定义，结果函数没有得到 called.Can 任何人请帮助我理解为什么？我几乎尝试了所有方法，但似乎没有任何效果，我也找不到任何指向我所面临问题的指示。

    class HomepageBody extends Component{ 
    constructor(props){
    super(props);
    this.state = {
    value :'',
    error: null,
    isLoaded: false,
    array: [],
    mobile: ''
   }
this.readSearchString = this.readSearchString.bind(this);
this.doSomething = this.doSomething.bind(this);
}

 readSearchString(event){
if(event.target.value === ''){
  this.setState({
    error: null,
    array: ''
  });
}
else{
this.setState ({
  value : event.target.value
});
}
}

doSomething = () => {
 fetch(`http://localhost:8080/items?search=${this.state.value}&page=1`, 
 {
  headers: {
    'Accept': 'application/json'
  }
})
  .then(res => res.json())
  .then(
    (result) => {
      if(result.length != 0){
      this.setState({
        isLoaded: true,
        array: result,
        error: null
      });
    }
    else{
      this.setState({
        isLoaded: true,
        error : "No matches found",
        array: ''
      })
    }
    },
    (error) => {
      this.setState({
        isLoaded: true,
        error: "We are experiencing some temporary problem, please try again later"
      });
    }
  )
  }

 render () {
const {mobile} = this.props;
return(
<Container>
  <Header
    as='h1'
    content='Title'
    style={{
      fontSize: mobile ? '1.2em' : '3em',
      fontWeight: 'normal',
      marginBottom: 0,
      marginTop: mobile ? '5em' : '3em',
      display:'block'
    }}
  />
<Input  icon={<Icon name='search' inverted circular link />}
    placeholder='Search .....'
    style={{
    fontSize: mobile ? '1em' : '1em',
    fontWeight: 'normal',
    marginTop: mobile ? '1em' : '1em',
    width: mobile ? '280px' : '600px',
  }}
  onChange={ this.readSearchString }
  onKeyPress={(event) => {
    if(event.key === 'Enter'){
      this.doSomething()
    }
  }}
  focus
/>
  </Container>
)
}
}
   HomepageBody.propTypes = {
   mobile: PropTypes.bool,
}

谢谢，维克拉姆

Answer 1

设置 tabIndex="0" 的属性，它将起作用。

tabindex="0" allows elements besides links and form elements to receive keyboard focus. It does not change the tab order, but places the element in the logical navigation flow, as if it were a link on the page.

Answer 2

是的，这就是我所做的。但它没有用。但是我想出了一个解决方案。如果我不使用语义 ui 框架的组件，那么我可以为 onKeyPress 定义内联函数并且它可以正常工作，但是当我使用语义 ui 框架并使用 <Input> 组件，我必须覆盖函数调用。所以我就是这样做的

    <Input>
      ..........
      .........
      onKeyPress = {this.onKeyPress}
      </Input>


    onKeyPress= (e) => {
    if(e.key === 'Enter')
    this.doSomething();
   }

所以我认为它与语义 ui 及其处理组件内事件的方式有关。

未调用 reactjs 中 onKeyPress 下的函数调用

Function call under onKeyPress in reactjs isn't getting called

javascript

reactjs

semantic-ui-react