英文:
Trying to return value from child to parent in react native
问题
以下是翻译后的代码部分:
Parent
export default function HdInputs(){
let [ht, setHt] = React.useState("");
let hdInput = (ht) => {
console.log("ht", ht)
setHt(ht);
}
return(
<View>
<HdParameter hdInput={hdInput} text="Ht (cm): " />
</View>
)
}
Child Function
export default function HdParameter(props){
let [param, setParam] = React.useState("");
let hdOutput = () => {
props.hdInput(param);
}
return(
<View style={AppStyles.hdParameter}>
<Text style={AppStyles.boldText}>{props.text}</Text>
<TextInput
style={[AppStyles.inputLight, { alignSelf: "center" }]
placeholder=''
defaultValue={props.defaultValue}
placeholderTextColor="#1b2747"
onChangeText={setParam}
value={param}
keyboardType="numeric"
onInput={hdOutput}
/>
</View>
)
}
如果你需要进一步的帮助,请随时告诉我。
英文:
I am trying to call a textinput child component then obtain a textinput value from the component. I am trying to pass the value back to the parent. However, I keep getting an empty value back to the parent. I can't seem to find my error. What am I doing wrong?
Parent
export default function HdInputs(){
let [ht, setHt] = React.useState("");
let hdInput = (ht) => {
console.log("ht", ht)
setHt(ht);
}
return(
<View>
<HdParameter hdInput={hdInput} text={"Ht (cm): "} />
</View>
)
}
Child Function
export default function HdParameter(props){
let [param, setParam] = React.useState("");
let hdOutput = ()=> {
props.hdInput(param);
}
return(
<View style={AppStyles.hdParameter}>
<Text style={AppStyles.boldText}>{props.text}</Text>
<TextInput
style={[AppStyles.inputLight, { alignSelf: "center" }]}
placeholder=''
defaultValue={props.defaultValue}
placeholderTextColor={"#1b2747"}
onChangeText={setParam}
value={param}
keyboardType="numeric"
onInput={hdOutput}
/>
</View>
)
}
答案1
得分: 1
以下是代码的翻译部分:
原始代码:
This is a simple piece of code that show how to get some dat from a child component.
import React from 'react';
import {TextInput} from 'react-native';
const Parent = () => {
const [textFromChild, setTextFromChild] = React.useState('');
const handleCallback = (text) => {
setTextFromChild(text);
};
return (
<Text>{textFromChild}</Text>
<Child handleCallback={handleCallback} />
);
};
const Child = (props) => {
const [text, onChangeText] = React.useState('Text');
const _onChangeText = (text) => {
onChangeText(text);
props.handleCallback(text)
};
return (
<TextInput
onChangeText={_onChangeText}
value={text}
/>
);
};
export default TextInputExample;
更新后的代码:
export default function HdInputs(){
let [ht, setHt] = React.useState("");
let hdInput = (ht) => {
console.log("ht", ht)
setHt(ht);
}
return(
<View>
<HdParameter hdInput={hdInput} text="Ht (cm): " />
</View>
)
}
export default function HdParameter(props){
let [param, setParam] = React.useState("");
const _onChangeText = (text) => {
setParam(text)
props.hdInput(text);
}
return(
<View style={AppStyles.hdParameter}>
<Text style={AppStyles.boldText}>{props.text}</Text>
<TextInput
style={[AppStyles.inputLight, { alignSelf: "center" }]
placeholder=''
defaultValue={props.defaultValue}
placeholderTextColor="#1b2747"
onChangeText={_onChangeText}
value={param}
keyboardType="numeric"
/>
</View>
)
}
英文:
This is a simple piece of code that show how to get some dat from a child component.
import React from 'react';
import {TextInput} from 'react-native';
const Parent = () => {
const [textFromChild, setTextFromChild] = React.useState('');
const handleCallback = (text) => {
setTextFromChild(text);
};
return (
<Text>{textFromChild}</Text>
<Child handleCallback={handleCallback} />
);
};
const Child = (props) => {
const [text, onChangeText] = React.useState('Text');
const _onChangeText = (text) => {
onChangeText(text);
props.handleCallback(text)
};
return (
<TextInput
onChangeText={_onChangeText}
value={text}
/>
);
};
export default TextInputExample;
> Warning
> I can see you used a props called onInput
. It doesn't seem exist in the TextInput
component from React Native
. So maybe it's a custom component from your project?
This is your code updated:
export default function HdInputs(){
let [ht, setHt] = React.useState("");
let hdInput = (ht) => {
console.log("ht", ht)
setHt(ht);
}
return(
<View>
<HdParameter hdInput={hdInput} text={"Ht (cm): "} />
</View>
)
}
export default function HdParameter(props){
let [param, setParam] = React.useState("");
const _onChangeText = (text) => {
setParam(text)
props.hdInput(text);
}
return(
<View style={AppStyles.hdParameter}>
<Text style={AppStyles.boldText}>{props.text}</Text>
<TextInput
style={[AppStyles.inputLight, { alignSelf: "center" }]}
placeholder=''
defaultValue={props.defaultValue}
placeholderTextColor={"#1b2747"}
onChangeText={_onChangeText}
value={param}
keyboardType="numeric"
/>
</View>
)
}
答案2
得分: 0
你只是忘记在HdParameter
内的hdOutput
函数中添加一个参数。
通常你需要将函数写成这样:
let hdOutput = (param) => {
props.hdInput(param);
}
英文:
You just forgot to add a param to the hdOutput
function inside HdParameter
.
Normally you need to make the function this way:
let hdOutput = (param) => {
props.hdInput(param);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论