添加react-bootstrap卡但具有用户定义的图像链接

问题描述

我是新来的反应者，正在尝试做我自己的第一个项目。我创建了一个将具有cardDeck的组件，然后将其导出到其他组件。这样做之后，我想知道如何使用户定义卡片图片，标题和文本。

这是我的cards.js组件

    import React,{Component} from 'react';
    import {CardDeck,Card} from 'react-bootstrap';
    
    class cards extends Component{
    
      render(){
        return(   <React.Fragment> < CardDeck>
          <Card>
            <Card.Img variant="top" src="holder.js/100px160" />
            <Card.Body>
              <Card.Title>Card title</Card.Title>
              <Card.Text>
                This is a wider card with supporting text below as a natural lead-in to
                additional content. This content is a little bit longer.
              </Card.Text>
            </Card.Body>
            </Card>
         </CardDeck></React.Fragment>
    );
      }
    
    }
    export default cards;

这是我正在使用card.js组件的组件

import React from 'react';

import Cards from '../bootstrap/Cards';
 
class home extends React.Component {
 
    render() {
        return (
            <React.Fragment> <Cards/>
            <Cards/><Cards/><Cards/></React.Fragment>
           
          
        );
    }
}

export default home;

此外，如果你们可以帮助我保持用户定义的卡片数量，您会看到我试图多次添加。

这也是我在这里的第一个问题，所以很抱歉，如果它不应该怎么做。

解决方法

这是一个简单的示例，说明您希望使用不带引导程序的create-react-app进行操作

import React from 'react';

class App extends React.Component {
  state = {
    cards: [],title: '',text: '',};

  onSubmit = (event) => {
    event.preventDefault();
    this.setState({
      cards: [
        ...this.state.cards,{ title: this.state.title,text: this.state.text },],});
  };

  changeTitle = (event) => {
    this.setState({
      title: event.target.value,});
  };

  changeText = (event) => {
    this.setState({
      text: event.target.value,});
  };

  render() {
    return (
      <>
        <form onSubmit={this.onSubmit}>
          <input
            type="text"
            placeholder=""
            name="title"
            value={this.state.title}
            onChange={this.changeTitle}
          />
          <input
            type="text"
            placeholder=""
            name="text"
            value={this.state.text}
            onChange={this.changeText}
          />
          <input type="submit" value="Submit" />
        </form>
        {this.state.cards.map((card) => {
          return <Card key={card.title} title={card.title} text={card.text} />;
        })}
      </>
    );
  }
}

export default App;

const Card = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.text}</p>
    </div>
  );
};

这个问题上有很多事情，所以我会尽力分解。

要在React中动态呈现列表，最常见的方法是在数组上映射并根据数组中的数据返回组件列表。因此，在我们名为cards的状态下设置了一个空数组，该数组将代表用户制作的卡片。

我们可以在此处渲染该数组中的项目：

{this.state.cards.map((card) => {
   return <Card key={card.title} title={card.title} text={card.text} />;
})}

请注意如何将title和text作为道具传递给Card组件

然后，我们需要一种让用户添加带有标题和文字的卡片的方法。最简单的方法是创建带有两个输入的表单。我们将title和text设置为空字符串，并使用changeTitle和changeText事件处理程序将在两种形式输入中所做的更改设置为state。这些功能相似，可以重构为一个功能，但是我想使代码简单易懂。

一旦我们能够跟踪对表单所做的更改，我们需要一种提交标题和文本的方法，以便用户可以创建新卡。 onSubmit处理该问题。 this.state.cards的值通过添加了cards和this.setState当前状态的新元素散布到text中的title上。然后将text和title设置为空字符串，以使用户看不到其先前的输入。

您可能会在React应用程序中做很多基本的React。我强烈建议您尽可能多地阅读和理解代码，并询问/查找有关代码工作方式的任何问题的答案。另外，钩子现在越来越普遍，因此我建议您也学习如何使用钩子