javascript - React Native - 如何在多个按钮上应用 Prop

Question

我有一个按钮，当我切换按钮时它会改变颜色。 这是代码:

state={
  status:[
    {toggle:false}
  ]
}

_onPress(){
  const newState = !this.state.toggle
  this.setState({toggle:newState})
}

render(){
      const {toggle} = this.state
      const textValue = toggle?"ON":"OFF"
      const buttonBG = toggle?"#6AAAC6":"white"
      const textColor = toggle?"white":"gray"

return(
<TouchableOpacity
onPress={()=>this._onPress()}
<Text>button</Text>
</TouchableOpacity>
)
}
}

但是如果我有多个按钮并且它们基本上执行相同的功能怎么办？有没有办法可以重复使用此代码而无需多次复制和粘贴？

Answer 1

您可以创建一个组件调用CustomButton

class CustomButton extends React.Component {

  static defaultProps = {
    onToggle: () => {},
  }

  state = {
    status: [{ toggle: false }]
  }

  _onPress() {
    const newState = !this.state.toggle
    this.setState({ toggle: newState })
    this.props.onToggle(newState)
  }

  render() {
    const { toggle } = this.state
    const textValue = toggle ? 'ON' : 'OFF'
    const buttonBG = toggle ? '#6AAAC6' : 'white'
    const textColor = toggle ? 'white' : 'gray'

    return (
      <TouchableOpacity onPress={() => this._onPress()}>
        <Text>button</Text>
      </TouchableOpacity>
    )
  }
}

并在任何你想要的地方使用

class App extends React.Component {

  onButtonToggle = (isToggle) => {
    console.log(isToggle)
  }

  render() {
    return (
      <View>
        <CustomButton onToggle={this.onButtonToggle} />
      </View>
    )
  }
}