Question

如何更改仅在行中输入关键字后才显示下拉列表的代码。

常量样式=主题=>（{ 容器： { 显示：“ flex”， flexWrap：“换行” }，文本域： { marginLeft：theme.spacing.unit， marginRight：theme.spacing.unit }，密集：{ marginTop：16 }，菜单：{ 宽度：200 } }）;

class Search extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: "" };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <TextField
          label="Dense"
          onChange={this.handleChange}
          value={this.state.text}
          variant="outlined"
        />
        if () <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <button>Add {this.state.items.length}</button>
        </form>
      </div>
    );
  }

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

  handleSubmit(e) {
    e.preventDefault();
    if (!this.state.text.length) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ""
    }));
  }
}

class Search extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => <li key={item.id}>{item.text}</li>)}
      </ul>
    );
  }
}

export default Search;

Answer 1

您可以通过添加一个检查器来实现，例如：

...
render() {
    return (
      <div>
        <TextField
          label="Dense"
          onChange={this.handleChange}
          value={this.state.text}
          variant="outlined"
        />

         {this.state.text.includes('whatever word you want') && <TodoList items={this.state.items} />}
        <form onSubmit={this.handleSubmit}>
          <button>Add {this.state.items.length}</button>
        </form>
      </div>
    );
  }

仅在输入中输入必填关键字时，如何打开下拉菜单？

1 个答案: