Question

我正在制作一个用于存储笔记的小型react.js应用程序，我想让用户能够按其名称搜索笔记，所以我为输入字段编写了以下代码：

<input
                type="text"
                name="title"
                className="form-control p-3"
                placeholder="Search for note by title ... "
                aria-label="note title"
                aria-describedby="basic-addon2"
                value={title}
                onChange={this.onChange.bind(this, dispatch)}
              />

这是我的onChange函数：

 onChange = (dispatch, e) => {
    this.setState({ [e.target.name]: e.target.value });
    dispatch({ type: "SEARCH_NOTE", payload: this.state.title });
  };

分派来自context.js文件，它调用了一个称为reducer的函数，这是代码

const reducer = (state, action) => {
  switch (action.type) {
    case "SEARCH_NOTE":
      return {
        ...state,
        notes: state.notes.filter(
          note => note.title.toUpperCase() === action.payload.toUpperCase()
        )
      };
    default:
      return state;
  }
};

因此，我想在用户开始在输入字段上键入内容时做出提示，只显示包含用户类型的注释，而另一个隐藏，而当输入字段为空时，将再次显示所有注释。怎么做？

在reactjs上处理onChange事件

0 个答案: