如何为每个音符设置不同的背景颜色?
export default class Note extends React.Component { render() {
return (
<View key={this.props.keyval} style = {[styles.note , this.props.notecolor]} >
<ScrollView>
<Text style ={styles.text} >{ this.props.val.note}</Text>
</ScrollView>
<View style ={styles.datte}>
<Text style ={styles.date}>{ this.props.val.date}</Text>
</View></View>
);}}
notecolor具有背景颜色属性
notecolor: { backgroundColor: 'orange' }
我设置了一些按钮来更改值,但是问题是当我添加第二个音符时,第一个音符也获得了相同的bk颜色,依此类推,对于其他音符,它们都获得了相同的背景色,具体取决于最后一个便笺已添加。
let notes = this.state.noteArray.map((val, key) => {
return (
<Note key={key} keyval={key} val={val} notecolor={this.state.notecolor} />
);
});
任何帮助!
答案 0 :(得分:0)
如果使用this.state.notecolor
保留颜色,则在更新状态时,将重新渲染整个页面。这就是每个note
具有相同背景色的原因。
这里有2种不同的技巧来完成您要实现的目标。
选项1
将notecolor
存储为note
中noteArray
对象的属性。例如,
class MainApp extends Component {
constructor(props) {
super(props);
this.state = {
noteArray : [
{
note: "Hello world!",
date: "2019-01-01",
notecolor: "orange",
},
{
note: "Hola world!",
date: "2019-01-01",
notecolor: "green",
}
]
};
}
render() {
<View>
{
this.state.noteArray.map((val, key) => {
return (
<Note key={key} keyval={key} val={val} notecolor={val.notecolor} switchColor={this.switchColor} />
);
});
}
</View>
}
switchColor = (color, key) => {
var noteArray = {this.state};
noteArray[key]["notecolor"] = color;
this.setState({
noteArray
})
}
}
要在note
上使用switchColor,只需像这样调用它
this.props.switchColor(newColor, this.props.key);
选项2
将notecolor
存储在单独的数组中。 **如果您不介意额外的属性,则选择1是一种更清洁的方法
noteArray = [
{
note: "Hello world!",
date: "2019-01-01",
},
{
note: "Hola world!",
date: "2019-01-01",
}
];
noteColorArray = ["orage", "green"];
更改颜色
switchColor = (color, key) => {
var noteColorArray = {this.state};
noteArray[key] = color;
this.setState({
noteColorArray
})
}
最后
呈现笔记
let notes = this.state.noteArray.map((val, key) => {
return (
<Note key={key} keyval={key} val={val} notecolor={val.notecolor} />
// OR, depends on which option you choose
<Note key={key} keyval={key} val={val} notecolor={this.state.noteColorArray[key]} />
);
});