Реагировать Родной | Передача значения реквизита в setState

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>
    );
  }
}

Который принимает «ярлык» в качестве реквизита. Тогда я хотел бы, чтобы значение метки использовалось в setState, в App.js

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>
    );
  }

Так что вместо hardcoding setState: 9 каждый раз, я бы хотел, чтобы это было:

setState: (значение метки пропеллер)

Но я действительно не знаю, как это сделать, поэтому любая помощь по этому поводу приветствуется, спасибо!

Answer 1

Сделать метод changeValue параметризованным. Так что код -

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

И звонить будет как -

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

Answer 2

Вы можете просто создать вторую функцию в своем компоненте NumberButton и запустить переданную функцию с нужным параметром. Вы должны быть осторожны, чтобы не потерять контекст this, поэтому вам нужно использовать либо Функции стрелок , либо вам нужно связать вашу функцию.

Пример

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,
  });
}

Answer 3

Вы можете просто к этому ...

     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:)