Как redux формирует передачу реквизита от HOC к элементу ввода
Я использую native-base (материальная библиотека пользовательского интерфейса для react-native) с формой redux для управления состоянием формы с помощью redux. Меня смущает следующий фрагмент кода. В приведенном ниже коде он принимает номер аргумента и передает его во входной тег с тройной точкой. но я не мог определить, что это такое и откуда он получает остальные свойства, и как я могу применять пользовательские реквизиты.
renderInput({ input, label, meta: { touched, error, warning } }){
console.info(input)
var hasError= false;
if (error !== undefined){
hasError= true;
}
return(
<Item error= {hasError}>
<Input {...input}
/>
{hasError ? <Text>{error}</Text> : <Text />}
</Item>
)
}
Ниже приведен метод рендеринга, который вызывает указанную выше функцию из компонента поля высшего порядка редукционной формы.
render(){
const { handleSubmit, reset } = this.props;
if (!this.state.isReady) {
return <Expo.AppLoading />;
}
return (
<Container>
<Header>
<Body>
<Title>Redux Form</Title>
</Body>
</Header>
<Content padder>
<Field name = "email" component = {this.renderInput} model = "sudhakar" type = "text" placeholder = "Username" />
<Field name = "name" component = {this.renderInput} type = "password" placeholder = "Password" />
<Input name = "age" type = "text" ref = "_age" />
<Button block primary onPress= {this.handleLogin}
style = {{marginHorizontal:10,backgroundColor:"#00adef", marginTop:50}}
>
<Text>Submit</Text>
</Button>
</Content>
</Container>
)
}
Вы можете найти полный код здесь
Ответы 1
Мне не разрешено оставлять комментарии, потому что моя репутация ниже 50.
Тройная точка называется оператор распространения, я думаю, это ключ к пониманию того, в чем вы запутались. когда я впервые увидел этот синтаксис, у меня было такое же замешательство. попробуйте прочитать ссылку выше плюс это, и я думаю, вы сможете понять проблему ур :)
Я не уверен, что Field делает внутри, потому что я не вижу, что внутри Field, но я должен предположить, что когда поле принимает this.renderInput как один из его props с именем component, он передает входной параметр изнутри Field, рассматривая его как Перезвоните
т.е. внутри поля может быть написано что-то вроде this.props.component(<whatever it wanna pass to renderInput as parameters>)
Я нашел ответ, следуя видеоуроку.
Я также нахожу тот же ответ, но не могу понять, откуда renderInput получает входной параметр.