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

Question

我在下面有两个色环，当单击该色环时，该色环的颜色将用相同的颜色更新底部的图标。 目前无法正常运作。

单击下面的handleClick方法时，是否可以传递addcolor道具？

谢谢你的帮助！

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>
        )

    }
}

Answer 1

检查以下工作示例。

 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> 

Answer 2

尝试对通过方法绑定的代码进行一些小的校正，它将代码从上下文传递到单击对象的方法（当前对象），因为上下文是规范性的更改，因此以这种方式强制您在类的上下文“ this”中使用。

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>
    )

}

}

Answer 3

addcolor="#1a3a69" 不是您可以从此组件范围读取/使用的道具 -它可以在<circle />作为道具使用-此处不需要，您必须将参数传递给处理程序

在读取传递给处理程序的参数后

和处理程序绑定选项，您可以这样写：

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})
}