我有一个defautProps数组,其中包含我通过映射和过滤在无序列表中显示的所有命名颜色。我已经显示了每个颜色名称,但是我想将该命名颜色用作内联样式标记的backgroundColor。下面列出了不成功的内联样式代码。感谢您的任何建议。
class JSexp extends React.Component {
constructor (props) {
super(props);
this.state = {
filterBy: ''
};
}
filterColors = () => {
const clr = document.getElementById('filter').value;
this.setState({ filterBy: clr})
}
getColor = (idx) => {
return this.props.allColors[idx]
}
render () {
const arr = this.props.allColors;
const filterBy = clr => clr.includes(this.state.filterBy);
const backgroundColor = this.getColor(16)
const style = {
width: '20px',
height: '20px',
backgroundColor: this.getColor({idx})
}
const colors = arr.filter(filterBy).map((color, idx) =>
(
<li key={idx}>{color} <div style={style} id={idx} /> </li>
));
return (
<div>
<h3>Named Colors</h3>
<ul>
{colors}
</ul>
<input type="text" placeholder="Filter by" id="filter" onChange={this.filterColors}></input>
</div>
);
}
}
JSexp.defaultProps = {
allColors: ["AliceBlue", "AntiqueWhite", "Aqua", "Aquamarine", "Azure", "Beige", "Bisque", "Black", "BlanchedAlmond",
"Blue", "BlueViolet", "Brown", "BurlyWood", "CadetBlue", "Chartreuse", "Chocolate",
"Coral", "CornflowerBlue", "Cornsilk", "Crimson", "Cyan", "DarkBlue", "DarkCyan", "DarkGoldenRod",
"DarkGray", "DarkGrey", "DarkGreen", "DarkKhaki", "DarkMagenta", "DarkOliveGreen", "Darkorange",
"DarkOrchid", "DarkRed", "DarkSalmon", "DarkSeaGreen", "DarkSlateBlue", "DarkSlateGray", "DarkSlateGrey",
"DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue", "DimGray", "DimGrey", "DodgerBlue",
"FireBrick", "FloralWhite", "ForestGreen", "Fuchsia", "Gainsboro", "GhostWhite", "Gold", "GoldenRod",
"Gray", "Grey", "Green", "GreenYellow", "HoneyDew", "HotPink", "IndianRed", "Indigo", "Ivory", "Khaki",
"Lavender", "LavenderBlush", "LawnGreen", "LemonChiffon", "LightBlue", "LightCoral", "LightCyan",
"LightGoldenRodYellow", "LightGray", "LightGrey", "LightGreen", "LightPink", "LightSalmon",
"LightSeaGreen", "LightSkyBlue", "LightSlateGray", "LightSlateGrey", "LightSteelBlue", "LightYellow",
"Lime", "LimeGreen", "Linen", "Magenta", "Maroon", "MediumAquaMarine", "MediumBlue", "MediumOrchid",
"MediumPurple", "MediumSeaGreen", "MediumSlateBlue", "MediumSpringGreen", "MediumTurquoise",
"MediumVioletRed", "MidnightBlue", "MintCream", "MistyRose", "Moccasin", "NavajoWhite", "Navy",
"OldLace", "Olive", "OliveDrab", "Orange", "OrangeRed", "Orchid", "PaleGoldenRod", "PaleGreen",
"PaleTurquoise", "PaleVioletRed", "PapayaWhip", "PeachPuff", "Peru", "Pink", "Plum", "PowderBlue",
"Purple", "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", "SeaGreen",
"SeaShell", "Sienna", "Silver", "SkyBlue", "SlateBlue", "SlateGray", "SlateGrey", "Snow", "SpringGreen",
"SteelBlue", "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", "Wheat", "White", "WhiteSmoke",
"Yellow", "YellowGreen"]
};
答案 0 :(得分:0)
这里
const style = {
width: '20px',
height: '20px',
backgroundColor: this.getColor({idx})
}
好像你缺少{idx}值。
尝试
const colors = arr.filter(filterBy).map((color, idx) => {
const style = {
width: '20px',
height: '20px',
backgroundColor: this.getColor({idx})
}
return <li key={idx}>{color} <div style={style} id={idx} /> </li>
)});
答案 1 :(得分:0)
如果我理解你的问题,你可以在进行数组映射时分配div的backgroundColor。
class JSexp extends React.Component {
constructor (props) {
super(props);
this.state = {
filterBy: ''
};
}
filterColors = (e) => {
this.setState({ filterBy: e.target.value})
}
render () {
const arr = this.props.allColors;
const filterBy = clr => clr.includes(this.state.filterBy);
const colors = arr.filter(filterBy).map((color, idx) =>
<li key={idx}>
{color}
<div style={{width: 20, height: 20, backgroundColor: color}}>
</div>
</li>
);
return (
<div>
<input type="text" placeholder="Filter by" id="filter" onChange={this.filterColors}></input>
<h3>Named Colors</h3>
<ul>
{colors}
</ul>
</div>
);
}
}
JSexp.defaultProps = {
allColors: ["AliceBlue", "AntiqueWhite", "Aqua", "Aquamarine", "Azure", "Beige", "Bisque", "Black", "BlanchedAlmond",
"Blue", "BlueViolet", "Brown", "BurlyWood", "CadetBlue", "Chartreuse", "Chocolate",
"Coral", "CornflowerBlue", "Cornsilk", "Crimson", "Cyan", "DarkBlue", "DarkCyan", "DarkGoldenRod",
"DarkGray", "DarkGrey", "DarkGreen", "DarkKhaki", "DarkMagenta", "DarkOliveGreen", "Darkorange",
"DarkOrchid", "DarkRed", "DarkSalmon", "DarkSeaGreen", "DarkSlateBlue", "DarkSlateGray", "DarkSlateGrey",
"DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue", "DimGray", "DimGrey", "DodgerBlue",
"FireBrick", "FloralWhite", "ForestGreen", "Fuchsia", "Gainsboro", "GhostWhite", "Gold", "GoldenRod",
"Gray", "Grey", "Green", "GreenYellow", "HoneyDew", "HotPink", "IndianRed", "Indigo", "Ivory", "Khaki",
"Lavender", "LavenderBlush", "LawnGreen", "LemonChiffon", "LightBlue", "LightCoral", "LightCyan",
"LightGoldenRodYellow", "LightGray", "LightGrey", "LightGreen", "LightPink", "LightSalmon",
"LightSeaGreen", "LightSkyBlue", "LightSlateGray", "LightSlateGrey", "LightSteelBlue", "LightYellow",
"Lime", "LimeGreen", "Linen", "Magenta", "Maroon", "MediumAquaMarine", "MediumBlue", "MediumOrchid",
"MediumPurple", "MediumSeaGreen", "MediumSlateBlue", "MediumSpringGreen", "MediumTurquoise",
"MediumVioletRed", "MidnightBlue", "MintCream", "MistyRose", "Moccasin", "NavajoWhite", "Navy",
"OldLace", "Olive", "OliveDrab", "Orange", "OrangeRed", "Orchid", "PaleGoldenRod", "PaleGreen",
"PaleTurquoise", "PaleVioletRed", "PapayaWhip", "PeachPuff", "Peru", "Pink", "Plum", "PowderBlue",
"Purple", "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", "SeaGreen",
"SeaShell", "Sienna", "Silver", "SkyBlue", "SlateBlue", "SlateGray", "SlateGrey", "Snow", "SpringGreen",
"SteelBlue", "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", "Wheat", "White", "WhiteSmoke",
"Yellow", "YellowGreen"]
};
ReactDOM.render(<JSexp />, document.getElementById('root'))
&#13;
<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>
&#13;
答案 2 :(得分:0)
嗯,经过一夜安眠后,我确实知道问题所在。它实际上比我想象的容易得多:
class NamedColors extends React.Component {
constructor(props) {
super(props);
this.state = {
filterBy: ''
};
}
filterColors = () => {
const clr = document.getElementById('filter').value;
this.setState({ filterBy: clr })
}
render() {
const itemStyle = {
fontSize: '.85rem',
padding: '5px'
}
const contentDisplay = {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
padding: '5px'
}
const contentHeader = {
display: 'flex',
alignItems: 'baseline'
}
const arr = this.props.allColors;
const filterBy = (strToFilter) => {
return strToFilter.includes(this.state.filterBy)
};
const colors = arr.filter(filterBy).map((color, idx) =>
(
<div key={idx + 10}>
<div key={idx} style={itemStyle}>
{color}
<div style={
{
backgroundColor: color,
width: '150px',
height: '32.5px',
border: 'solid',
borderWidth: '1px'
}
} />
</div>
</div>
));
return (
<div>
<div style={contentHeader}>
<h3>Named Colors</h3>
<input type="text" placeholder="Filter by" id="filter" onChange={this.filterColors}></input>
</div>
<div style={contentDisplay}>
{colors}
</div>
</div>
);
}
}
NamedColors.defaultProps = {
allColors: ["AliceBlue", "AntiqueWhite", "Aqua", "Aquamarine", "Azure", "Beige", "Bisque", "Black", "BlanchedAlmond",
"Blue", "BlueViolet", "Brown", "BurlyWood", "CadetBlue", "Chartreuse", "Chocolate",
"Coral", "CornflowerBlue", "Cornsilk", "Crimson", "Cyan", "DarkBlue", "DarkCyan", "DarkGoldenRod",
"DarkGray", "DarkGrey", "DarkGreen", "DarkKhaki", "DarkMagenta", "DarkOliveGreen", "Darkorange",
"DarkOrchid", "DarkRed", "DarkSalmon", "DarkSeaGreen", "DarkSlateBlue", "DarkSlateGray", "DarkSlateGrey",
"DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue", "DimGray", "DimGrey", "DodgerBlue",
"FireBrick", "FloralWhite", "ForestGreen", "Fuchsia", "Gainsboro", "GhostWhite", "Gold", "GoldenRod",
"Gray", "Grey", "Green", "GreenYellow", "HoneyDew", "HotPink", "IndianRed", "Indigo", "Ivory", "Khaki",
"Lavender", "LavenderBlush", "LawnGreen", "LemonChiffon", "LightBlue", "LightCoral", "LightCyan",
"LightGoldenRodYellow", "LightGray", "LightGrey", "LightGreen", "LightPink", "LightSalmon",
"LightSeaGreen", "LightSkyBlue", "LightSlateGray", "LightSlateGrey", "LightSteelBlue", "LightYellow",
"Lime", "LimeGreen", "Linen", "Magenta", "Maroon", "MediumAquaMarine", "MediumBlue", "MediumOrchid",
"MediumPurple", "MediumSeaGreen", "MediumSlateBlue", "MediumSpringGreen", "MediumTurquoise",
"MediumVioletRed", "MidnightBlue", "MintCream", "MistyRose", "Moccasin", "NavajoWhite", "Navy",
"OldLace", "Olive", "OliveDrab", "Orange", "OrangeRed", "Orchid", "PaleGoldenRod", "PaleGreen",
"PaleTurquoise", "PaleVioletRed", "PapayaWhip", "PeachPuff", "Peru", "Pink", "Plum", "PowderBlue",
"Purple", "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", "SeaGreen",
"SeaShell", "Sienna", "Silver", "SkyBlue", "SlateBlue", "SlateGray", "SlateGrey", "Snow", "SpringGreen",
"SteelBlue", "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", "Wheat", "White", "WhiteSmoke",
"Yellow", "YellowGreen"]
};