时间戳

首页 > 解决方案 > 如何通过反应中的提交按钮选择随机api

javascript - 如何通过反应中的提交按钮选择随机api

问题描述

我通过单击按钮在 api 中选择随机数据，不工作我的代码代码需要 submitChange 函数中的代码 

export class MemeGenerator extends React.Component {
constructor (props) {
super(props)
this.state = {
  apiData: []
}
this.submitChange = this.submitChange.bind(this)
}
componentDidMount () {
fetch('https://api.imgflip.com/get_memes')
  .then(response => response.json())
  .then(data => {
   this.setState({
     apiData: data
    })
    console.log(this.state.apiData)
  })}

OnChange 函数 ???????

submitChange () {
}

并从 api 渲染 select img

render () {
return (
  <div>
    <form onSubmit={this.submitChange}>
      <button onClick={this.submitChange} value='Submit'>Gen</button>
   <div>
       <img src='http://i.imgflip.com/1bij.jpg' onLoad={this.loadImg} />
   </div>
    </form>
  </div>
)}}

标签： javascripthtmljsonreactjsapi

解决方案

export class MemeGenerator extends React.Component {
constructor (props) {
super(props)
this.state = {
  apiData: []
}
this.submitChange = this.submitChange.bind(this)
}
componentDidMount () { /* fetch something as default here to show user or nothing till user pushes Gen button*/}

    submitChange (name) {
    fetch(`https://api.imgflip.com/${name}`)
    .then(response => response.json())
    .then(data => {
       this.setState({
       apiData: data
       })
    console.log(this.state.apiData)
    })
    }

render () {
return (
  <div>
    <form onSubmit={this.submitChange}>
      /* you should decide whre to get this name from an array of names from state? hardcode enum ...*/
      <button onClick={this.submitChange({name})} value='Submit'>Gen</button>
   <div>
       <img src='http://i.imgflip.com/1bij.jpg' onLoad={this.loadImg} />
   </div>
    </form>
  </div>
)}}

推荐阅读