Как изменить стили каждого элемента массива отдельно?
Вы можете использовать регулярное выражение следующим образом:
[\W_]+
Идея состоит в том, чтобы сопоставить символ \W с несловным символом (те символы, которые не являются A-Z, a-z, 0-9 и _), а также явно добавить _ (так как подчеркивание считается символом слова)
var str = 's - is my 4 String, and i - want remove all characters 49494 that are not letters or "numbers"';
var result = str.replace(/[\W_]+/g, ' ');
1 ответ
Если вы используете this.state.notecolor для сохранения цвета, то при обновлении состояния вся страница будет отрисована заново. Вот почему каждый note будет иметь одинаковый цвет фона.
Вот два разных трюка, чтобы сделать то, что вы пытаетесь достичь.
Вариант 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
})
}
}
Чтобы использовать switchColor на note, вам просто нужно назвать его так
this.props.switchColor(newColor, this.props.key);
[ 1128] Вариант 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]} />
);
});