代码之家  ›  专栏  ›  技术社区  ›  StackUnderFlow

如何向click handler发送道具-React JS

reactjs javascript
  •  0
  • StackUnderFlow  · 技术社区  · 6 年前

    下面有两个彩色圆圈,当单击时,单击圆圈的颜色将用相同的颜色更新底部图标。现在不行了。 

    class Color extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            colorMain: "#ff0200",
            colorBlue: "#1a3a69",
            colorWhite: "#f1f1f1",
            colorBlack: "#000000",
            colorPink: "#faaea5"
        };
    }

    handleClick = () => {
        this.setState({colorMain: this.props.addcolor})
    }

    render() {

        return (
                <div>                    
                    <div className="ColorPopover" data-test="ColorPopover">
                        <div className="ColorSwatchItem" data-test="ColorSwatchItem">
                            <div className="ColorSwatch" data-test="ColorSwatch">
                                <div className="ColorCircle">
                                    <svg width="28" height="28" x="0" y="0" viewBox="0 0 28 28" fill="#1a3a69" stroke-opacity="0.15">
                                    <g stroke="rgb(64, 64, 64)" stroke-width="2" stroke-opacity="0.15" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
                                        <circle onClick={this.handleClick} addcolor="#1a3a69" fill={this.state.colorBlue} cx="14" cy="14" r="13"></circle>
                                    </g>
                                    </svg>
                                </div>
                            </div>
                        </div>

                        <div className="ColorSwatchItem" data-test="ColorSwatchItem">
                            <div className="ColorSwatch" data-test="ColorSwatch">
                                <div className="ColorCircle">
                                    <svg width="28" height="28" x="0" y="0" viewBox="0 0 28 28" fill="#1a3a69" stroke-opacity="0.15">
                                    <g stroke="rgb(64, 64, 64)" stroke-width="2" stroke-opacity="0.15" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
                                        <circle onClick={this.handleClick} addcolor="#f1f1f1" fill={this.state.colorWhite} cx="14" cy="14" r="13"></circle>
                                    </g>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>

                <div className="icons">
                    <span class="f11">
                        <span class="">
                            <svg color={this.state.colorMain} aria-hidden="true" data-prefix="fas" data-icon="skull" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-skull fa-w-16 fa-fw"><path fill="currentColor" d="M256 0C114.6 0 0 100.3 0 224c0 70.1 36.9 132.6 94.5 173.7 9.6 6.9 15.2 18.1 13.5 29.9l-9.4 66.2c-1.4 9.6 6 18.2 15.7 18.2H192v-56c0-4.4 3.6-8 8-8h16c4.4 0 8 3.6 8 8v56h64v-56c0-4.4 3.6-8 8-8h16c4.4 0 8 3.6 8 8v56h77.7c9.7 0 17.1-8.6 15.7-18.2l-9.4-66.2c-1.7-11.7 3.8-23 13.5-29.9C475.1 356.6 512 294.1 512 224 512 100.3 397.4 0 256 0zm-96 320c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64zm192 0c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z" class=""></path></svg>
                        </span>
                    </span>
                </div>


                </div>
        )

    }
}
    3 回复  |  直到 6 年前
        1
  •  1
  •   Thilina Sampath Alexander    6 年前

    检查下面的工作示例。 

    class App extends React.Component {

  constructor(props) {
        super(props);
        this.state = {
            colorMain: "#ff0200",
            colorBlue: "#1a3a69",
            colorWhite: "#f1f1f1",
            colorBlack: "#000000",
            colorPink: "#faaea5"
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(color) {
        //console.log('e', e);
        this.setState({colorMain: color})
    }

    render() {

        return (
                <div>                    
                    <div className="ColorPopover" data-test="ColorPopover">
                        <div className="ColorSwatchItem" data-test="ColorSwatchItem">
                            <div className="ColorSwatch" data-test="ColorSwatch">
                                <div className="ColorCircle">
                                    <svg width="28" height="28" x="0" y="0" viewBox="0 0 28 28" fill="#1a3a69" stroke-opacity="0.15">
                                    <g stroke="rgb(64, 64, 64)" stroke-width="2" stroke-opacity="0.15" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
                                        <circle onClick={() => {this.handleClick('"#1a3a69'); }} addcolor="#1a3a69" fill={this.state.colorBlue} cx="14" cy="14" r="13"></circle>
                                    </g>
                                    </svg>
                                </div>
                            </div>
                        </div>

                        <div className="ColorSwatchItem" data-test="ColorSwatchItem">
                            <div className="ColorSwatch" data-test="ColorSwatch">
                                <div className="ColorCircle">
                                    <svg width="28" height="28" x="0" y="0" viewBox="0 0 28 28" fill="#1a3a69" stroke-opacity="0.15">
                                    <g stroke="rgb(64, 64, 64)" stroke-width="2" stroke-opacity="0.15" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
                                        <circle onClick={() => {this.handleClick('#f1f1f1'); }} addcolor="#f1f1f1" fill={this.state.colorWhite} cx="14" cy="14" r="13"></circle>
                                    </g>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>

                <div className="icons">
                    <span class="f11">
                        <span class="">
                            <svg color={this.state.colorMain} aria-hidden="true" data-prefix="fas" data-icon="skull" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-skull fa-w-16 fa-fw"><path fill="currentColor" d="M256 0C114.6 0 0 100.3 0 224c0 70.1 36.9 132.6 94.5 173.7 9.6 6.9 15.2 18.1 13.5 29.9l-9.4 66.2c-1.4 9.6 6 18.2 15.7 18.2H192v-56c0-4.4 3.6-8 8-8h16c4.4 0 8 3.6 8 8v56h64v-56c0-4.4 3.6-8 8-8h16c4.4 0 8 3.6 8 8v56h77.7c9.7 0 17.1-8.6 15.7-18.2l-9.4-66.2c-1.7-11.7 3.8-23 13.5-29.9C475.1 356.6 512 294.1 512 224 512 100.3 397.4 0 256 0zm-96 320c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64zm192 0c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z" class=""></path></svg>
                        </span>
                    </span>
                </div>


                </div>
        )

    }
}

ReactDOM.render(<App />, document.getElementById('root'));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>
        2
  •  0
  •   Oliver Valiente Oliva    6 年前

    类颜色扩展反应组分{ 

    constructor(props) {
    super(props);
    this.state = {
        colorMain: "#ff0200",
        colorBlue: "#1a3a69",
        colorWhite: "#f1f1f1",
        colorBlack: "#000000",
        colorPink: "#faaea5"
    };
}

handleClick = () => {
    this.setState({colorMain: this.props.addcolor})
}

render() {

    return (
            <div>                    
                <div className="ColorPopover" data-test="ColorPopover">
                    <div className="ColorSwatchItem" data-test="ColorSwatchItem">
                        <div className="ColorSwatch" data-test="ColorSwatch">
                            <div className="ColorCircle">
                                <svg width="28" height="28" x="0" y="0" viewBox="0 0 28 28" fill="#1a3a69" stroke-opacity="0.15">
                                <g stroke="rgb(64, 64, 64)" stroke-width="2" stroke-opacity="0.15" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
                                    <circle onClick={this.handleClick.bind(this)} addcolor="#1a3a69" fill={this.state.colorBlue} cx="14" cy="14" r="13"></circle>
                                </g>
                                </svg>
                            </div>
                        </div>
                    </div>

                    <div className="ColorSwatchItem" data-test="ColorSwatchItem">
                        <div className="ColorSwatch" data-test="ColorSwatch">
                            <div className="ColorCircle">
                                <svg width="28" height="28" x="0" y="0" viewBox="0 0 28 28" fill="#1a3a69" stroke-opacity="0.15">
                                <g stroke="rgb(64, 64, 64)" stroke-width="2" stroke-opacity="0.15" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
                                    <circle onClick={this.handleClick} addcolor="#f1f1f1" fill={this.state.colorWhite} cx="14" cy="14" r="13"></circle>
                                </g>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>

            <div className="icons">
                <span class="f11">
                    <span class="">
                        <svg color={this.state.colorMain} aria-hidden="true" data-prefix="fas" data-icon="skull" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-skull fa-w-16 fa-fw"><path fill="currentColor" d="M256 0C114.6 0 0 100.3 0 224c0 70.1 36.9 132.6 94.5 173.7 9.6 6.9 15.2 18.1 13.5 29.9l-9.4 66.2c-1.4 9.6 6 18.2 15.7 18.2H192v-56c0-4.4 3.6-8 8-8h16c4.4 0 8 3.6 8 8v56h64v-56c0-4.4 3.6-8 8-8h16c4.4 0 8 3.6 8 8v56h77.7c9.7 0 17.1-8.6 15.7-18.2l-9.4-66.2c-1.7-11.7 3.8-23 13.5-29.9C475.1 356.6 512 294.1 512 224 512 100.3 397.4 0 256 0zm-96 320c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64zm192 0c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z" class=""></path></svg>
                    </span>
                </span>
            </div>


            </div>
    )

}

    }

        3
  •  0
  •   xadm    6 年前

    addcolor="#1a3a69" 不是可以从此组件作用域中读取/使用的道具 <circle /> -这里不需要,您必须将参数传递给处理程序

    阅读后 passing parameters to handlers in react

    handler binding options 你可以这样写: 

    handleClick = (color) => {
    this.setState({colorMain: color})
}

<circle onClick={this.handleClick('"#1a3a69')} fill={this.state.colorBlue} cx="14" cy="14" r="13"></circle>

    colorMain 也可以是参数 

    handleClick = (statePropName, color) => {
  this.setState({ [statePropName]: color})
}
    推荐文章
    BADRUM  ·  执行两个获取功能后,如何导航回页面?
    1 年前
    Agrim Singh  ·  对象无效,因为使用React router dom时显示React子错误
    1 年前
    Anaya Ammar  ·  渲染后未显示的值
    1 年前
    matin kahrizi  ·  当我的状态更改时,useSelector不更新
    1 年前
    YotiPoti  ·  我的照片太大了,无法容纳我的HTML画布。我该怎么办?
    1 年前
    Zemelon  ·  -moz背面可见性不适用于顺风css
    1 年前
    Abdelaziz Elrasheed  ·  如何成为专业的网页开发人员。。。?[已关闭]
    1 年前
    JustTrynaProgram  ·  React和Tailwind-从配置中读取自定义断点值
    1 年前
    Mark C.  ·  制作一个可松开的单选按钮[关闭]
    1 年前
    Tridip Lodh  ·  在ES6中,JAVASCRIPT函数在“严格使用”模式下的行为如何?[已关闭]
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号