我下面有两个色环，当单击该色环时，该色环的颜色将用相同的颜色更新底部的图标。当前无法正常工作。
单击下面的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>
)
}
}
答案 0 :(得分：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>
答案 1 :(得分：0)
尝试对通过方法绑定的代码进行一些小的校正，它将代码从上下文传递到单击方法，当前对象，因为上下文是规范性的更改，因此以这种方式强制您在上下文中具有“ 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>
)
}
}
答案 2 :(得分：0)
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})
}