请选择 进入手机版 | 继续访问电脑版

#楼主# 2020-5-16

跳转到指定楼层

表单的非常简单的示例,该表单接受GitHub用户名,并且一旦收到`submit'事件,就会向GitHub API询问用户信息,并打印出来。

表单的非常简单的示例,该表单接受GitHub用户名,并且一旦接收到submit事件,就会向GitHub API询问用户信息,并打印它们。

此代码创建可重复使用的Card组件。当您在inputForm组件管理的字段中输入名称时,该名称将绑定到其state

当按下添加卡时,通过清除表单组件的userName状态来清除输入表单。

除了React,该示例还使用Axios库。这是一个很好的有用且轻量级的库,用于处理网络请求。将其添加到Codepen的笔设置中,或使用本地安装npm install axios

输出量

我们首先创建该Card组件,该组件将显示从GitHub收集的图像和详细信息。它通过道具获取数据,使用

  • props.avatar_url 用户头像
  • props.name 用户名
  • props.blog 用户网站网址

    const Card = props => {
    return (
    <div style={{ margin: '1em' }}>
      <img alt="avatar" style={{ width: '70px' }} src={props.avatar_url} />
      <div>
        <div style={{ fontWeight: 'bold' }}>{props.name}</div>
        <div>{props.blog}</div>
      </div>
    </div>
    )
    }

我们创建了这些组件的列表,该列表将由cardsprop中的父组件传递到CardList,使用map()并在其上迭代并输出卡片列表:

const CardList = props => (
  <div>
    {props.cards.map(card => (
      <Card {...card} />
    ))}
  </div>
)

父组件是App,它cards以自己的状态存储数组,并使用useState()Hook 对其进行管理:

const App = () => {
  const [cards, setCards] = useState([])

  return (
    <div>
      <CardList cards={cards} />
    </div>
  )
}

凉!我们现在必须有一种方法可以向GitHub询问单个用户名的详细信息。我们将使用Form组件来管理自己的状态(username),并通过[Axios]要求GitHub使用其公共API来提供有关用户的信息:

const Form = props => {
  const [username, setUsername] = useState('')

  handleSubmit = event => {
    event.preventDefault()

    axios.get(`https://api.github.com/users/${username}`).then(resp => {
      props.onSubmit(resp.data)
      setUsername('')
    })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={event => setUsername(event.target.value)}
        placeholder="GitHub username"
        required
      />
      <button type="submit">Add card</button>
    </form>
  )
}

提交表单handleSubmit后,我们将调用事件,在网络调用之后,我们将props.onSubmit传递App从GitHub获得的数据的父项()传递给我们。

我们将其添加到中App,并通过一种方法将新卡添加到卡列表中addNewCard,作为其onSubmit支持:

const App = () => {
  const [cards, setCards] = useState([])

  addNewCard = cardInfo => {
    setCards(cards.concat(cardInfo))
  }

  return (
    <div>
      <Form onSubmit={addNewCard} />
      <CardList cards={cards} />
    </div>
  )
}

最后,我们渲染应用程序:

ReactDOM.render(<App />, document.getElementById('app'))

这是我们的小React应用程序的完整源代码:

const { useState } = React

const Card = props => {
  return (
    <div style={{ margin: '1em' }}>
      <img alt="avatar" style={{ width: '70px' }} src={props.avatar_url} />
      <div>
        <div style={{ fontWeight: 'bold' }}>{props.name}</div>
        <div>{props.blog}</div>
      </div>
    </div>
  )
}

const CardList = props => <div>{props.cards.map(card => <Card {...card} />)}</div>

const Form = props => {
  const [username, setUsername] = useState('')

  handleSubmit = event => {
    event.preventDefault()

    axios
      .get(`https://api.github.com/users/${username}`)
      .then(resp => {
        props.onSubmit(resp.data)
        setUsername('')
      })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={event => setUsername(event.target.value)}
        placeholder="GitHub username"
        required
      />
      <button type="submit">Add card</button>
    </form>
  )
}

const App = () => {
  const [cards, setCards] = useState([])

  addNewCard = cardInfo => {
    setCards(cards.concat(cardInfo))
  }

  return (
    <div>
      <Form onSubmit={addNewCard} />
      <CardList cards={cards} />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app'))
转播转播
回复

使用道具

成为第一个评论人

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

damonare

网站编辑

  • 主题

    267

  • 帖子

    269

  • 关注者

    0

手机版|ObjectX 超对象 |粤ICP备20005929号
Powered by  © 2019-2020版权归ObjectX 超对象