Question

我正在做一个get的{{1}}项目，并在屏幕上进行渲染。

但是当我在其上添加过滤功能时，它只会在我输入要过滤的名称后呈现。我想让他渲染每个人并制作过滤器。

我的Body.js（我的渲染功能在哪里）：

json-server

我的App.js（我在哪里得到了import React from 'react'; import './Body.css'; import { Link } from "react-router-dom"; class Body extends React.Component { constructor(props) { super(props); this.state = { input: "", employeeBody: this.props.employee, } } getName = () => { const { employee, add } = this.props; const {employeeBody} = this.state; return employee.map(name => ( <div className='item'> <Link className="link" to={`/user/${name.id}`}> <div onClick={() => add(name)} key={name.id}> <img className="img" src={`https://picsum.photos/${name.id}`} /> </div> <h1 className="name2"> {name.name} </h1> </Link> </div> )); }; --- getValueInput = (evt) => { const inputValue = evt.target.value; this.setState({ input: inputValue }); this.filterNames(inputValue); console.log(this.state.employeeBody) } filterNames (inputValue) { const { employee } = this.props; this.setState({ employeeBody: employee.filter(item => item.name.includes(inputValue)) }); } --- render() { return ( <div> <div className="body"> {this.getName()} </div> <div className='input'> <input type="text" onChange={this.getValueInput} /> </div> </div> ) } } export default Body; axios的状态。）：

get

有人可以帮助我吗？

Answer 1

您应该在渲染方法中进行过滤。

render() {
  const { employee: employees } = this.props; // rename the variable {employee} to plural {employees}, it has more sense.
  const { input } = this.state;
  return (
    <div>
      <div className="body">
        {employees
          .filter(employee => employee.name.includes(input))
          .map(employee => {
            <div className='item'>
              <Link className="link" to={`/user/${employee.id}`}>
                <div onClick={() => add(employee)} key={employee.id}>
                  <img className="img"
                    src={`https://picsum.photos/${employee.id}`}
                  />
                </div>
                <h1 className="name2"> {employee.name} </h1>
              </Link>
            </div>
          })}
      </div>
      <div className='input'>
        <input type="text" onChange={(e) => this.setState({ input: e.target.value })} />
      </div>
    </div>
  );
}

请记住，方法includes区分大小写，在比较之前应该是lowerCase。

P.S。：你也可以创建一个变量/组件/函数并渲染拆分渲染的所有“逻辑”。

如何在使用ReactJS过滤元素之前渲染元素？

1 个答案: