Question

我是Javascript，ES6和ReactNative的初学者。我有一个名为Input的类组件。我有一个方法（handleTextLayout），其中我得到Text的宽度。我需要在render方法中使用那个数字，假设我想显示它的文本有多大。我怎样才能有一个类变量然后在该方法中更改它并将其传递给类中的其他位置？以下是我尝试过的（除了许多其他事情）但它不起作用。

class Input extends Component {

  constructor(){
      super();
      Input.TextWidth = '11111';
  }



  handleTextLayout(evt){    
    Input.TextWidth = evt.nativeEvent.layout.width;
  }


  render(){

    const { label, placeholder, onChangeText, value }  = this.props;
    const { inputStyle, labelStyle, viewContainerStyle } = myInputStyle ;

    return(
      <View style={ viewContainerStyle } >

        <Text style={ labelStyle }  onLayout={this.handleTextLayout.bind(this)}>
          { Input.TextWidth }
        </Text>

        <TextInput
          style={ inputStyle }
          placeholder={ placeholder }
          onChangeText={ onChangeText }
          value={ value }
          autoCorrect={false}
        />

      </View>
    );
  };
};

它仍会在文本中显示11111。

Answer 1

修改

评论中的一些人指出了这段代码中的错误 - 我现在修复了这些错误，谢谢！

我对React Native一无所知，但我认为这与React相同。

我猜你能做的就是创建一个状态并在那里保存那个宽度。然后在handleTextLayout方法中将状态设置为新值。

这样：

constructor(props){
  super(props);
  this.state = {
    textWidth: '11111'
  };
  this.handleTextLayout.bind(this); // a good practice
}

然后

handleTextLayout(evt){    
  this.setState({ textWidth: evt.nativeEvent.layout.width });
}

最后在渲染中：

<Text style={ labelStyle } onLayout={this.handleTextLayout}>
  { this.state.textWidth }
</Text>

这将有效，因为setState将重新渲染组件，以便显示新值。

在类基类组件

1 个答案: