Question

我正在学习反应，并一直在Codecademy上一门课程。现在，我独自一人玩耍，只是想捡拾东西。

说我保存了一些列表。例如

运动员
教练
团队
等

我有一个父页面。而且我希望用户能够搜索处于特定状态或邮政编码等的运动员。

有人可以指出正确的方向开始学习。我猜我需要使用道具。如果说的话或类似的东西，但又是新的话，这一切现在势不可挡。

如果有人可以帮助我入门或将我指向可以获取更多信息的方向，那将是很棒的。

Answer 1

您有一个父母，该父母从用户那里获取搜索输入值，并将搜索值传递给子组件。

class Parent extends Component {

  state = {
    state: '',
    postal: ''
  }

  // Search terms from the user
  // You decide how you should get these values
  search(state, postal) {
    this.setState({ state, postal })
  }

  render() {
    return (
      <div className="App">
        {/* Pass your search terms to your child */}
        <MyChild state={ this.state.state } postal={ this.state.postal } />
      </div>
    );
  }
}

子组件将通过prop获取这些搜索值，并检查它们是否在您定义的列表中。

class Child extends Component {

  constructor(props) {
    super()
  }

  // check if item exists in list
  check() {
    // Get props
    const { state, postal } = this.props
    // Search through list
    return list.find(item => {
      if (state === item.state) { return item.name }
      if (postal === item.postal) { return item.name }
    })
  }

  render() {
    return (
      <div>
        // render the name of the athelete
        <p>{ this.check() }</p>
      </div>
    );
  }
}

反应的新学习者

1 个答案: