为什么我不能在我的 React 搜索框中输入任何内容？

Question

我有一个名为 SearchInput 的组件，其中包含

  <input
    type='text'
    className='input-field'
    value={value}
    placeholder={this.state.placeholder}
    // onFocus={::this.onFocus}
    // onBlur={::this.onBlur}
    // onKeyUp={::this.onKeyUp}
    // onKeyDown={::this.hanleArrowKeys}
    // onChange={::this.onChange}
  />

但是，当我在其中输入任何内容时，没有任何反应。文字甚至没有出现。我做错了什么？

Answer 1

可能你的状态没有更新，也许你没有绑定 "this" 到函数 onChange？

下面是react中正确输入的例子：

class SearchInput extends Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

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

  render() {
    return <input type="text" value={this.state.value} onChange={this.handleInputChange}/>;
  }
}

Answer 2

可能您正在将输入框的值与组件状态中的属性绑定，并且您没有为输入标签提供 onChange 属性，或者您的 onChange 回调方法没有更新状态中的属性输入标签的值绑定到的。

为什么我不能在我的 React 搜索框中输入任何内容？

How come I can't type anything into my React search box?

reactjs

react-jsx