Question

我正在编写一个电子应用程序，我正在使用它来反应UI。我正在尝试添加形状（矩形，方形......），因此我为每个形状创建了组件。我有一个形状列表，当我点击列表时，会添加相应的形状。但是我想要添加两次相同的形状，这是我无法做到的。有人可以帮我吗？以下是我的代码。

List.js

import React from 'react';

class List extends React.Component{



    render(){
        return (
            <div>
                <li onClick={this.props.drawSquare}>Square</li>
                <li onClick={this.props.drawRectangle}>Rectangle</li>
                <li onClick={this.props.drawCircle}>Circle</li>
            </div>
    );
    }
}

export default List

AppContainer.js

import React from 'react'
import List from '../components/List'
import Square from '../components/Square'
import Rect from '../components/Rect'
import Cir from '../components/Cir'
import But from '../components/basic/button'

const style={
    position: 'fixed',
    width: '800',
    height: '800'
};

const butStyle={
    position: 'relative',
    top: '500px'
}
const style1={
    borderStyle: 'groove',
    position: 'fixed',
    width: '500',
    height: '500'
};
class AppContainer extends React.Component{


    constructor(props) {
        super(props);
        this.state={squareclicked:0,
        rectClicked:0,
        circleClicked:0,};
    }

    drawSquare(){
        console.log("inside square function");
        this.setState({squareclicked:this.state.squareclicked+1})
        console.log(this.state.squareclicked);
    }

    drawRectangle(){
        console.log("inside rect function");
        this.setState({rectClicked:this.state.rectClicked+1})
    }

    drawCircle(){
        console.log("inside circle function");
        this.setState({circleClicked:this.state.circleClicked+1})
    }


    render(){
        console.log('render called');
        return (
            <div style={style}>
            <div id="mainAppDiv" >

            <List drawSquare={this.drawSquare.bind(this)}
            drawRectangle={this.drawRectangle.bind(this)}
            drawCircle={this.drawCircle.bind(this)}/>

            <div id="shapeConatinerDiv" style={style1}>
            {this.state.squareclicked}
            {this.state.squareclicked > 0 && (<Square/>)}
            {this.state.circleClicked > 0 && (<Cir/>)}
            {this.state.rectClicked > 0 && (<Rect/>)}
            </div>
            </div>
            <div style={butStyle}>
                <But/>
            </div>
            </div>

        ); 

    }
}

export default AppContainer

Square.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Rectangle} from 'react-shapes';
import Rnd from 'react-rnd'
import Modal from 'react-bootstrap/lib/Modal'
import ColorPallete from './Badging/ColorPalette'
import Button from 'react-bootstrap/lib/Button'

const style = {
  border: 'solid 1px',

};

const style1={
    position: 'fixed',
    width: '500',
    height: '500'
};

class Square extends React.Component{



    constructor(props) {
      super(props);
      this.state={w:100,
          h:100,
        col:{color:'#ff0000'},
        zIndex: 99,
        modalShow: false,
    };

    }

    close(){
        this.setState({modalShow: false});
    }

    onDrag(){
        console.log('hi');
    }

    onResi(dir, styleSize, clientSize, delta){
        this.setState({w:clientSize.width});
        this.setState({h:clientSize.height});
    }

    editSquare(){
        this.setState({ modalShow: true }); 
    }

      render(props) {
        return (

        <Rnd ref={c => { this.rnd = c; }}
            initial={{
                x: parent.innerWidth / 2 - 700,
                y: parent.innerHeight / 2 - 80,
                width: this.state.w,
                height: this.state.h,
            }}
            style={style}
            minWidth={this.state.w}
            minHeight={this.state.h}
            maxWidth={500}
            maxHeight={500}
            bounds={'parent'}
            lockAspectRatio={true}
            onResize={this.onResi.bind(this)}
            onDrag={this.onDrag.bind(this)}
      >
     <Rectangle width={this.state.w} height={this.state.h} fill={this.state.col} stroke={{color:'#E65243'}} strokeWidth={1} onClick={this.editSquare.bind(this)}/>
      </Rnd >


        );

    }

}

export default Square

其他形状的代码类型相同。

现在我只能添加一个方格，当我再次点击时没有任何反应。但我能够添加其他形状一次。

Answer 1

您希望向数组添加元素并渲染元素数组。这里有一些可能有用的粗略代码：

Component {
    constructor() {
        super(props)
        this.state = { elements: [] }
    }
    render() {
        return (<div>
            <div onClick={()=>this.add()}>Add</div>
            <div>{this.state.elements}</div>
        </div>)
    }
    add() {
        this.setState({
            elements: this.state.elements.push(<div id={elements.length}>Element</div>)
        })
    }
}

在onClick上反应两次渲染相同的组件

1 个答案: