Question

我是React Native的新手，我有兴趣开始制作计算器应用程序。但我有一个问题。

我创建了一个新组件NumberButton

class NumberButton extends React.Component {
  render() {
    return (
      <TouchableOpacity style={styles.buttonBox} onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.props.label}</Text>
      </TouchableOpacity>
    );
  }
}

以'标签'作为道具。然后我想在app.js

中的setState中使用标签的值

export default class App extends React.Component {
  constructor() {
    super()
    this.state = {
      outputValue: 0,
    }
  }

  changeValue = () => {
    this.setState({
      outputValue: 9,
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <OutputBox output={this.state.outputValue}/>
        <View style={styles.buttonRow}>
          <NumberButton onPress={this.changeValue} label="9"/>
        </View>
      </View>
    );
  }

因此，不是每次都对setState：9进行硬编码，而是将其视为：

setState :(标签道具的价值）

但我真的不知道该怎么做，所以感谢任何帮助，谢谢！

Answer 1

你可以简单地对此......

     changeValue(value) {
            this.setState({
            outputValue: value,
            });
          }

将此功能作为支柱传递：

        <NumberButton onPress={this.changeValue.bind(this)} label={'SetAValue'}/>

然后在你的数字组件上你可以触发这样的功能：

<TouchableOpacity style={styles.buttonBox} onPress={this.props.onPress.bind(this,this.props.label)}>
    <Text style={styles.buttonText}>{this.props.label}</Text>
  </TouchableOpacity>

你的函数应该将setState的参数设置为动态的，这将是从NumberButton组件传递的值：）

Answer 2

使changeValue方法参数化。所以代码是 -

 changeValue = (a) => {
    this.setState({
      outputValue: a,
    });
  }

呼叫就像 -

 <NumberButton onPress={this.changeValue(9)} label="9"/>

Answer 3

您可以在NumberButton组件中创建第二个函数，并使用您想要的参数运行传递的函数。您需要注意不要丢失this的上下文，因此您需要使用Arrow Functions或者需要bind您的函数。

示例

class NumberButton extends React.Component { _onPress = () => { this.props.onPress(this.props.label) } render() { return ( <TouchableOpacity style={styles.buttonBox} onPress={this._onPress}> <Text style={styles.buttonText}>{this.props.label}</Text> </TouchableOpacity> ); } } // OR class NumberButton extends React.Component { constructor(props) { super(props) this._onPress = this._onPress.bind(this) } _onPress() { this.props.onPress(this.props.label) } render() { return ( <TouchableOpacity style={styles.buttonBox} onPress={this._onPress}> <Text style={styles.buttonText}>{this.props.label}</Text> </TouchableOpacity> ); } }

然后您可以使用changeValue功能，如下所示

changeValue = (label) => { this.setState({ outputValue: label, }); }

React Native |将prop值传递给setState

3 个答案: