Javascript 如何更改子组件的背景颜色

我实现了两个简单的react组件，如下所示：

用户组件（父级）：

导出默认类用户扩展React.Component{
建造师（道具）{
超级（道具）；
这个州={
用户：[
{id:1，name:'name1'}，
{id:2，name:'name2'}，
{id:3，name:'name3'}，
{id:4，name:'name4'}
]
}
}
render（）{
返回(
使用者
{this.state.data.map（（用户）=>{
回来
})}
)
}
}

卡组件（子组件）：

类卡扩展React.Component{
render（）{
返回(
{this.props.user.name}
)
}
}

我想在点击时更改卡的背景色

我尝试将卡组件更改为：

class Card extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            BGClass: 'unselectedCard'
        }
    }

    select() {

        this.setState({BGClass: 'selectedCard'})
    }

    render() {
        return (
            <TouchableWithoutFeedback onPress={() => {
                this.select()
            }}>
                <View  style={styles[this.state.BGClass]}>
                    <Text>Card</Text>
                </View>
            </TouchableWithoutFeedback>
        )
    }
}

类卡扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
BGClass:“未选择的卡”
}
}
选择（）{
this.setState（{BGClass:'selectedCard'}）
}
render（）{
返回(
{
this.select（）
}}>
卡片
)
}
}

---

通过此更改，当我点击卡片时，卡片背景会发生更改，但我的问题是，当新卡片更改为选定的背景色时，另一张卡片不会返回到未选定的背景色，

您的问题与ES6类方法有关，默认情况下，这些方法不会绑定到类实例（请参阅）

更改：

<TouchableWithoutFeedback onPress={() => {
    this.select()
}}>

编辑

导出默认类用户扩展React.Component{
建造师（道具）{
超级（道具）；
这个州={
用户：[
{id:1，name:'name1'}，
{id:2，name:'name2'}，
{id:3，name:'name3'}，
{id:4，name:'name4'}
],
selectedUserId:null，
}
}
选择（用户ID）{
this.setState（{selectedUserId:userId}）
}
render（）{
返回(
使用者
{this.state.data.map（（用户）=>{
回来
})}
)
}
}
类卡扩展了React.Component{
render（）{
返回(
{
this.props.onSelect（this.props.user.id）
}}>
卡片
)
}
}

this.select（）有效，但如何将另一个背景更改为未选择的样式您必须在父组件中定义select方法，并将其作为道具传递给

Card

组件此代码仍存在许多问题（效率、可读性、linting等）。此代码非常简单，便于理解，可以给我一个简单的代码，我可以怎么做呢？我改变selectedUserId为this.state.selectedUserId，它的工作，感谢有用的回应

class Card extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            BGClass: 'unselectedCard'
        }
    }

    select() {

        this.setState({BGClass: 'selectedCard'})
    }

    render() {
        return (
            <TouchableWithoutFeedback onPress={() => {
                this.select()
            }}>
                <View  style={styles[this.state.BGClass]}>
                    <Text>Card</Text>
                </View>
            </TouchableWithoutFeedback>
        )
    }
}

<TouchableWithoutFeedback onPress={() => {
    this.select()
}}>

<TouchableWithoutFeedback onPress={this.select.bind(this)}>

this.select = this.select.bind(this)

export default class Users extends React.Component {

    constructor(props){
        super(props);
        this.state={
            users:[
                {id:1,name:'name1'},
                {id:2,name:'name2'},
                {id:3,name:'name3'},
                {id:4,name:'name4'}
            ],
            selectedUserId: null,
        }
    }

    select(userId) {
        this.setState({selectedUserId: userId})
    }

    render(){
        return (
            <View>
                <Text>Users</Text>
                {this.state.data.map((user) => {
                    return <Card user={user} isSelected={user.id === this.state.selectedUserId} onSelect={this.select.bind(this)}/>
                })}
            </View>
        )
    }
}

class Card extends React.Component {
    render() {
        return (
            <TouchableWithoutFeedback onPress={() => {
                this.props.onSelect(this.props.user.id)
            }}>
                <View  style={!this.props.isSelected && styles['unselectedCard']}>
                    <Text>Card</Text>
                </View>
            </TouchableWithoutFeedback>
        )
    }
}