ReactJS:点击时动态添加组件 [英] ReactJS: Dynamically add a component on click

问题描述

我有一个菜单按钮，按下时必须添加一个新组件.它似乎有效(如果我手动调用该函数来添加它们显示的组件).问题是，如果我单击按钮，它们不会显示出来，我想是因为我应该使用 setState 来重绘它们.我不确定如何在另一个函数/组件中调用另一个组件的 setState.

这是我的 index.js

从'react'导入反应；从 'react-dom' 导入 ReactDOM；导入'./index.css'；从'./Menu'导入菜单；从 './serviceWorker' 导入 * 作为 serviceWorker；从'./Block.js'导入块；ReactDOM.render(<div className="主容器"><菜单/><方块/></div>, document.getElementById('root'));//如果你想让你的应用离线工作和加载更快，你可以改变//unregister() 到 register() 下面.请注意，这带有一些陷阱.//了解更多关于服务工作者的信息:serviceWorker.unregister();

然后我有 Menu.js

从'react'导入反应；导入'./Menu.css'；从'./Block.js'导入{blocksHandler}；类菜单扩展 React.Component {构造函数(道具){超级(道具)；this.state = {值:''};this.handleAdd = this.handleAdd.bind(this);}处理添加(事件){blocksHandler.add('lol');console.log(blocksHandler.render());}使成为() {返回 (<div className="菜单"><header className="菜单标题"><button className="Menu-button" onClick={this.handleAdd}>添加块</button></标题></div>);}}导出默认菜单；

最后是 Block.js

从'react'导入反应；导入'./Block.css'；//此函数将组件添加到数组并返回它们让 blocksHandler = (function() {让块 = [];返回 {添加:功能(块){blocks.push(block);},渲染:函数(){返回块；}}})();类块扩展 React.Component {构造函数(道具){超级(道具)；这个.state = {标题: ''，内容: ''};this.handleChange = this.handleChange.bind(this);this.handleSubmit = this.handleSubmit.bind(this);}处理变化(事件){this.setState({[event.target.name]: event.target.value});}处理提交(事件){alert('提交了一个名字:' + this.state.title);event.preventDefault();}使成为() {返回 (<div className="块容器"><form onSubmit={this.handleSubmit}><div className="块标题"><标签>块标题:
{blocksHandler.render().map(i => (<区块键={i}/>))}</div>)}}导出默认块；导出 {blocksHandler};

我是 React 的初学者，所以我什至不确定我的方法是否正确.感谢您提供的任何帮助.

解决方案

下面我敲了一个非常简单的父/子类型设置，..

Parent 负责渲染 Button，这里我只是使用了一个简单的编号数组.当您单击任何按钮时，它会调用 Parent 中的 setState，这反过来会导致 Parent 重新渲染它的 Children.

<块引用>

注意:我也使用过 React Hooks 来做这件事，我只是找到了更多自然且更易于使用.可以使用Classes，原理相同适用.

const {useState} = React;功能孩子(道具){常量 {标题} = 道具；常量 {lines, setLines} = props.pstate;返回<按钮点击={()=>{setLines([...lines,lines.length]);}}>{标题}</按钮>;}功能父(道具){const [行，setLines] = useState([0]);return lines.map(m => <子键={m} caption={`点击${m}`} pstate={{lines, setLines}}/>);}ReactDOM.render(<React.Fragment><父母/></React.Fragment>, document.querySelector('#mount'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></脚本><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><div id="mount"></div>

I have a menu button that when pressed has to add a new component. It seems to work (if I manually call the function to add the components they are shown). The problem is that if I click the button they are not shown, and I suppose because I should use setState to redraw them. I am not sure how to call the setState of another component within another function/component.

This is my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Menu from './Menu';
import * as serviceWorker from './serviceWorker';
import Blocks from './Block.js';


ReactDOM.render(
    <div className="Main-container">
        <Menu />
        <Blocks />
    </div>
    , document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers:
serviceWorker.unregister();

Then I have the Menu.js

import React from 'react';
import './Menu.css';
import {blocksHandler} from './Block.js';

class Menu extends React.Component {

  constructor(props) {

    super(props);
    this.state = {value: ''};

    this.handleAdd = this.handleAdd.bind(this);

  }

  handleAdd(event) {
    blocksHandler.add('lol');
    console.log(blocksHandler.render());
  }

  render() {
    return (
      <div className="Menu">
        <header className="Menu-header">
          <button className="Menu-button" onClick={this.handleAdd}>Add block</button>
        </header>
      </div>
    );
  }
}

export default Menu;

And finally the Block.js

import React from 'react';
import './Block.css';

// this function adds components to an array and returns them

let blocksHandler = (function() {
    let blocks = [];
    return {
        add: function(block) {
            blocks.push(block);
        },
        render: function() {
            return blocks;
        }
    }
})();

class Block extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: '',
            content: ''
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({[event.target.name]: event.target.value});
    }

    handleSubmit(event) {
        alert('A name was submitted: ' + this.state.title);
        event.preventDefault();
    }

    render() {
      return (
        <div className="Block-container">
            <form onSubmit={this.handleSubmit}>
            <div className="Block-title">
                <label>
                    Block title:
                    <input type="text" name="title" value={this.state.value} onChange={this.handleChange} />
                </label>
            </div>
            <div className="Block-content">
                <label>
                    Block content:
                    <input type="text" name="content" value={this.state.value} onChange={this.handleChange} />
                </label>
            </div>
            <input type="submit" value="Save" />
            </form>
        </div>
      );
    }
}

class Blocks extends React.Component {

    render() {
        return (
            <div>
                {blocksHandler.render().map(i => (
                    <Block key={i} />
                ))}
            </div>
        )
    }
}


export default Blocks;
export {blocksHandler};

I am a React complete beginner so I'm not even sure my approach is correct. Thank you for any help you can provide.

解决方案

Below I've knocked up a really simple Parent / Child type setup,..

The Parent is responsible for rendering the Buttons, I just used a simple numbered array here. When you click any of the buttons, it calls the setState in the Parent, and this in turns causes the Parent to re-render it's Children.

Note: I've also used React Hooks to do this, I just find them more natural and easier to use. You can use Classes, the same principle applies.

const {useState} = React;

function Child(props) {
  const {caption} = props;
  const {lines, setLines} = props.pstate;
  return <button onClick={() => {
    setLines([...lines, lines.length]);
  }}>
    {caption}
  </button>;
}

function Parent(props) {
  const [lines, setLines] = useState([0]);  
  return lines.map(m => <Child key={m} caption={`Click ${m}`} pstate={{lines, setLines}}/>);
}


ReactDOM.render(<React.Fragment>
  <Parent/>
</React.Fragment>, document.querySelector('#mount'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="mount"></div>

这篇关于ReactJS:点击时动态添加组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！