Question

我是React Native的新手，我正在尝试创建一个TextInput，我可以根据textInput的焦点状态设置样式。我的理解是子类化反应不大，所以我正在尝试创建包含文本输入的组件。

所以我创建了这个组件：

class FocusTextInput extends React.Component<{}, { isFocused: boolean }> {
  constructor(props: {}) {
    super(props);
    this.state = { isFocused: false };
  }
  onFocus() {
    this.setState({ isFocused: true });
  }

  onBlur() {
    this.setState({ isFocused: false });
  }

  render() {
    return (
      <TextInput
        {...this.props}
        // style={this.state.isFocused ? { backgroundColor: 'red' } : { backgroundColor: 'green' }}
        style={{ backgroundColor: '#aaa' }} // <<<<<<<<<<<<<<  If i delete this line then it works, just no style override
      />
    );
  }
}

我正试图像这样使用它：

      <FocusTextInput
        ref="digit0"
        isFocused="false"
        onChangeText={this.handleDigitChanged.bind(this, 0)}
        style={styles.digitFramedControlDigit}
        maxLength={1}
        returnKeyType="next"
        selectTextOnFocus
        selectionColor="#ffffff00"
      />

所以我能够将这些属性传递给子（TextInput），但我怎么能覆盖这个样式呢？

另外，我不确定这是正确的方法，好像我想在我的FocusTextInput上调用InputText公开的任何hte方法，我必须声明这些方法并转发方法调用。这看起来很傻。

任何帮助表示感谢。

Answer 1

你可以尝试添加！重要的造型。见下文。

 style={{ backgroundColor: '#aaa !important' }}

Answer 2

最推荐的方法是使用数组语法覆盖父级：

在儿童（ FocusTextInput ）中，请应用：style={[{ backgroundColor: '#aaa' }, this.props.style]}

从左到右阅读。因此backgroundColor默认为 #aaa 。如果this.props.style有新的定义，那么它将覆盖前一个（<）。

将道具传递给子项并覆盖一些

2 个答案: