Question

我有一个查询。.我需要将值从一个组件传递到另一组件。.我希望在品种列表.js组件中的click事件之后接收到的值（查看控制台）来替换基本url值“ akita”品种价值参考： https://stackblitz.com/edit/react-kfwzgi

Answer 1

首先，您需要在<{<BreedImages />和<BreedList />组件上定义其他道具，以分别处理选定品种的接收和选择/点击品种。

在您的index.js上，

const BASE_URL= "https://dog.ceo/api/breeds/list/all"
class App extends Component {
   state={
    breeds: [],
    selectedBreed: undefined,
  }
  componentDidMount(){
    fetch(BASE_URL)
    .then(res => res.json())
    .then(data => {
      this.setState({
        breeds: Object.keys(data.message)
        })
    })
  }

  handleSelect(selectedBreed) {
    this.setState({ selectedBreed });
  }

  render() {
    const { selectedBreed } = this.state;

    return (
      <Router>
       <div className="App">
       <Route path="/" exact strict render={
         ()=> {
           return (<BreedList handleSelect={(val) => this.handleSelect(val)}/>)
         }
       }/>
       <Route path="/images/" exact strict render={
         ()=> {
           return (<BreedImages breed={selectedBreed}/>)
         }
       }/>

      </div>
       </Router>

    );
  }
}

然后，您需要在BreedList.js上修改clickHandler方法，以使其调用handleSelect props方法，以将所选的犬种传递回父级{{1 }}组件

index.js

然后，在您的BreedImages.js上，您可以侦听clickHandler(e) { const val = e.currentTarget.value this.props.handleSelect(val) }生命周期挂钩上的prop更新，并从那里进行必要的操作。

我添加了componentDidUpdate语句以在执行任何其他操作之前比较prop的值，因为这将防止任何不必要的重新渲染或请求。

if

我已经分叉了您的演示，并在here上进行了更改。

将价值从一种成分传递到另一种成分

1 个答案: