堆栈内存溢出
  简体   繁体   English

如何向点击处理程序发送道具-React JS

[英]How to send props to click handler - React JS

 原文  2018-08-28 03:38:22  0   3    javascript/ reactjs

问题描述

I got two color circles below that when clicked the color of that clicked circle will update the bottom icon with the same color. 我在下面有两个色环，当单击该色环时，该色环的颜色将用相同的颜色更新底部的图标。 Currently it's not working. 目前无法正常运作。

Is there a way to pass the addcolor props when clicked to the handleClick method below? 单击下面的handleClick方法时，是否可以传递addcolor道具？

Thanks for any help! 谢谢你的帮助！ 

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 个解决方案

解决方案1
 1 已采纳  2018-08-28 04:56:01

check below working example. 检查以下工作示例。 

 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  2018-08-28 04:49:52

Try this little correction to the code that through the method bind, it passes from context to the method of the click, the current object, because the context changes normatively, so in this way forces you to have in context "this" of your class. 尝试对通过方法绑定的代码进行一些小的校正，它将代码从上下文传递到单击对象的方法（当前对象），因为上下文是规范性的更改，因此以这种方式强制您在类的上下文“ this”中使用。

class Color extends React.Component { Color类扩展了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.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  2018-08-28 09:54:59

addcolor="#1a3a69" is not a prop you can read/use from this component scope - it would be available as prop inside <circle /> - not needed here, you have to pass parameter to handler addcolor="#1a3a69" 不是您可以从此组件范围读取/使用的道具 -它可以在<circle />作为道具使用-此处不需要，您必须将参数传递给处理程序

after reading passing parameters to handlers in react 在读取传递给处理程序的参数后

and handler binding options you can write sth like: 和处理程序绑定选项，您可以这样写： 

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

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

colorMain can be a parameter, too colorMain也可以是参数 

handleClick = (statePropName, color) => {
  this.setState({ [statePropName]: color})
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 React.JS 的 onClick 事件侦听器中将道具发送到组件？ - How to send props to a component in onClick event listener in React.JS? 如何发送道具与道具组件反应 - how to send props with props component react 如何在反应中发送动态道具 - how to send dynamic props in react 如何在反应羽毛笔图像处理程序中访问道具 - how to access props in react quill image handler React JS：使用 props 传递我的处理程序函数的问题 - React JS: Problems with passing my handler function with props 在事件处理程序中访问 React JS 中当前组件的道具和状态 - Access props and state of current component in React JS within an event handler react.js：事件而不是在props中传递处理程序 - react.js: events instead of passing handler in props 问题两次单击 React JS 中的提交处理程序 - Problem twice click on submit handler in React JS 如何发送值 React Hook(props) - How to send values React Hook(props) 如何将道具发送到组件以对条件做出反应？ - How to send props to a component in react with conditional?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM