将此搜索 class 组件重新设计为功能组件时遇到问题

Question

此组件使用关键字搜索课程。我需要一些帮助将其重新设计为功能组件。我需要一些指导，所以我也将逐步学习。

const courses = [
  'Economics',
  'Math II',
  'Math I'
];

class SearchBar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      search: []
    }
  }

  render() {
    let options;
    if (this.state.search.length) {
      const searchPattern = new RegExp(this.state.search.map(term => `(?=.*${term})`).join(''), 'i');
      options = courses.filter(option =>
        option.match(searchPattern)
      );
    } else {
      options = courses;
    }

    return (
      <div>
        <input type="text" onChange={(e) => this.setState({ search: e.target.value.split(' ') })} />
        <ul>
          {options.map((option, i) =>
            <li key={option + i}>{option}</li>
          )}
        </ul>
      </div>
    )
  }
}

ReactDOM.render(<SearchBar />, document.body)

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

Answer 1

如果您了解 class 组件的生命周期，您将不难理解功能组件的工作原理。

功能组件的主要兴趣在于钩子的使用。

这是关于组件的反应文档：https://fr.reactjs.org/docs/components-and-props.html

这是关于钩子的反应文档：https://fr.reactjs.org/docs/hooks-intro.html

这是您的功能组件的示例：

function SearchBar() {
const [search, setSearch] = useState([]);   

let options;
if (search.length) {
const searchPattern = new RegExp(search.map(term => `(?=.*${term})`).join(''), 'i');
    options = courses.filter(option => 
        option.match(searchPattern)
    );
} else {
    options = courses;
}
  
return (
    <div>
        <input type="text" onChange={(e) => setSearch(e.target.value.split(' '))}/>
        <ul>
            {options.map((option, i) => 
                <li key={option+i}>{option}</li>
            )}
        </ul>
    </div>
)
}

ReactDOM.render(<SearchBar />, document.body)

将此搜索 class 组件重新设计为功能组件时遇到问题

Having issue reengineering this search class component to a functional component

javascript

reactjs

search

frontend