Question

我有一个视图，其中包含多张卡，每张卡中都有值。

我可以复制一张卡。但是，这不会保留重复卡中的值。

如果卡片A的值处于其状态之内，我如何告诉父视图使用卡片A的值创建卡片B？

这是我的看法。我要渲染多张卡片

 {items.map((item, i) => (
            {
                'VideoCard': <div><Droppable onChange={droppableResponse} /><CreateVideoCard onChange={cardActionResponse} i={i} /></div>,
                'AudioCard': <div><Droppable onChange={droppableResponse} /><CreateAudioCard onChange={cardActionResponse} i={i}></CreateAudioCard></div>,
                'DescriptionCard': <div><Droppable onChange={droppableResponse} /><CreateDescriptionCard onChange={cardActionResponse} i={i}></CreateDescriptionCard></div>,
                'BreakdownCard': <div><Droppable onChange={droppableResponse} /><CreateDescriptionCard onChange={cardActionResponse} i={i}></CreateDescriptionCard></div>,
                'Terms': <div><Droppable onChange={droppableResponse} /><CreateTermsCard onChange={cardActionResponse} i={i}></CreateTermsCard></div>
            }[item]
        ))}

当卡发送诸如删除或重复之类的响应时，我进入了cardActionResponse函数。这是重复的部分：

  if (event[0] == 'duplicate') {
            //Retrieve item from items array at location event[1] 
            console.log(items[event[1]])
            var data = JSON.stringify(event[2])
            console.log(data)
            //Retrieve information about which card was duplicated. Not just AudioCard but AudioCard w/ info
            items.splice(event[1], 0, items[event[1]])
            forceUpdate()
        }

各种数据返回我需要插入到新的重复卡中的重复数据。但是，这需要我更改我的cardList的当前结构

const [items, setItems] = useState([
    'VideoCard',
    'AudioCard' ,
    'DescriptionCard',
    'BreakdownCard',
    'Terms',
]);

此外，我需要能够向每张卡发送它的位置（i），并且我能够使用items.map函数做到这一点。

我正在考虑创建类似的东西

<CreateVideoCard onChange={cardActionResponse} i={I} data={data} />

然后在我的createvideocard组件中，我将检查数据是否为空，否则将交换状态。

有没有更简单的方法可以复制内部状态为组件的组件？这似乎有点多余吗？

Answer 1

如果发布一些代码，将有助于回答问题。

无论如何，因为您还没有这样做，所以这里是一个建议的解决方案。

从父级到cardList-> card传递一个回调函数，例如onDuplicate（）。卡组件应调用该函数onClick重复项。

此onDuplicate函数将更新父状态。这是一个示例示例

const data = [{
      id: 1111,
      name:"some name",
    //THERE ARE OTHER FIELDS I HAVE NOT ADDED
    }]

    const CardList = (props) => (
      <div>
        {props.profiles.map(profile => <Card key={profile.id}  onDuplicate={props.onDuplicate}  profile={...profile}/>)}
      </div>
    );

    class Card extends React.Component {

      duplicate = ()=>{
        console.log(this.props)
        this.props.onDuplicate({...this.props.profile,id: 222})
      }
      render() {
        const profile = this.props.profile;
        return (
          <div className="github-profile">
            <img src={profile.avatar_url} />
            <div className="info">
              <div className="name">{profile.name}</div>
              <div className="company">{profile.company}
              </div>
              <div><button onClick={this.duplicate}>duplicate</button></div>
            </div>
          </div>
        );
      }
    }



    class App extends React.Component {
      state = {
        profiles: data,
      };

      onDuplicate = (profileData)=>{
        console.log("+++++++"+profileData.name+""+profileData.company)
        this.setState(prevState => ({
          profiles: [...prevState.profiles, profileData],
        }));
      }
      render() {
        return (
          <div>
            <CardList profiles={this.state.profiles} onDuplicate={this.onDuplicate}/>
          </div>
        );
      } 
    }

Answer 2

Select SUM (amount) from accounts Where acctype = 1;函数应该在卡内，然后在父级中调用传递当前状态的函数。

duplicate

Answer 3

我必须使用的关键功能是React.cloneElement

我将项目数组更改为

  const [items, setItems] = useState([
        <CreateVideoCard onChange={cardActionResponse}/>,
        <CreateAudioCard onChange={cardActionResponse}></CreateAudioCard>,
        <CreateDescriptionCard onChange={cardActionResponse}></CreateDescriptionCard>,
        <CreateDescriptionCard onChange={cardActionResponse}></CreateDescriptionCard>,
        <CreateTermsCard onChange={cardActionResponse}></CreateTermsCard>,
    ]);

并使用

进行渲染

{items.map((item, i) => (
                    React.cloneElement(item, {i: i})
                ))}

当我收到重复请求时，我会使用cloneElement向道具数组添加数据道具：

 items.splice(event[1] + 1, 0, React.cloneElement(items[event[1]], { data: data }))

然后在我的卡片构造函数中。我检查了props.data是否未定义。如果是这样，我将交换状态，如果不是，则将创建基础结构。

带有状态值的组件重复[问题的更新代码]

3 个答案: