Question

我想从Parent到达子组件中TextInput的值。

get value from TextInput and pass to grandparent and to the child react native

上面有一个例子。但是我正在使用模板，并且TextInput以不同的方式创建（至少对我来说，我在react native中是非常新的。），如下所示。我尝试过这种方法，但是无法触发onChangeValue方法。

-----Child--------

import { TextInput, View } from 'react-native';

import styled from 'styled-components';

const CustomInput = styled(TextInput).attrs(({onChangeValue, placeholder, type, theme }) => ({
  placeholderTextColor: theme.colors.transparentGrayx,
  selectionColor: theme.colors.defaultWhite,
  underlineColorAndroid: 'transparent',
  secureTextEntry: type === 'password',
  autoCapitalize: 'none',
  textContentType: type,
  autoCorrect: false,
  placeholder,
  onChangeValue: onChangeValue
}))`
  width: 90%;
  height: 100%;
  font-family: CircularStd-Book;
  color: ${({ theme }) => theme.colors.defaultWhite};
`;



type InputProps = {
  placeholder: string,
  iconName: string,
  type: string,
  onChangeValue : function,
};

const Input = ({ value, placeholder, iconName, type, onChangeValue }: InputProps): Object => (
  <ContentContainer
    color={appStyles.colors.transparentGray}
  >
    <InputWrapper>
      <InputIcon
        iconName={iconName}
      />
      <CustomInput
        placeholder={placeholder}
        type={type}
        value = {value}
        onChangeValue = {onChangeValue}
      />
    </InputWrapper>
  </ContentContainer>
);

export default Input;


-----Child--------

---Parent--------------
.
.

  constructor(props) {
    super(props);
    this.onChangeValue = this.onChangeValue.bind(this);
    this.state = {
      value: ''
    };
  }
.
.

  onChangeValue = e => {
    console.log("dfdf")
  }
.
.
  renderInput = (
    placeholder: string,
    iconName: string,
    type: string,
    style: Object,
    onChangeValue : function
  ): Object => (
    <Input
      placeholder={placeholder}
      iconName={iconName}
      style={style}
      type={type}
      onChangeValue={onChangeValue}
    />
  );

.
.
return (
      <Container>
        <Animated.View
          style={emailAnimationStyle}
        >
          {this.renderInput(
            'E-mail',
            'email-outline',
            'emailAddress',
            emailAnimationStyle,
            this.onChangeValue()
          )}
        </Animated.View>

      </Container>
    );
---Parent--------------

有人可以帮我吗？

Answer 1

有一个示例代码。组件：

const UserInput = ({onChangeText}) => (

  <View>
      <TextInput onChangeText={text => onChangeText(text)}></TextInput>
  </View>
)

这是组件用法：

  constructor(props){
    super(props)
    this.onChangeText = this.onChangeText.bind(this)

  }

  onChangeText(text){
    console.log(text)
  }
  render() {
    return (
      <UserInput onChangeText={this.onChangeText}>

      </UserInput>
    )
  }
}

如何通过attrs将函数传递给子组件

1 个答案: