尝试在React Native中从子组件返回值给父组件。

huangapple go评论49阅读模式
英文:

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(&quot;&quot;);
  let hdInput =  (ht) =&gt; {
    console.log(&quot;ht&quot;, ht)

    setHt(ht);

  }

return(
       &lt;View&gt;
             &lt;HdParameter hdInput={hdInput} text={&quot;Ht (cm): &quot;} /&gt;
       &lt;/View&gt;
)
}

Child Function

export default function HdParameter(props){
    let [param, setParam] = React.useState(&quot;&quot;);

    let hdOutput = ()=&gt; {
        props.hdInput(param);
    }
    return(
        &lt;View style={AppStyles.hdParameter}&gt;
        &lt;Text style={AppStyles.boldText}&gt;{props.text}&lt;/Text&gt;
        &lt;TextInput
          style={[AppStyles.inputLight, { alignSelf: &quot;center&quot; }]}
          placeholder=&#39;&#39;
          defaultValue={props.defaultValue}
          placeholderTextColor={&quot;#1b2747&quot;}
          onChangeText={setParam}
          value={param}
          keyboardType=&quot;numeric&quot;
          onInput={hdOutput} 

        /&gt;
        
      &lt;/View&gt;
    )
}

答案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 &#39;react&#39;;
import {TextInput} from &#39;react-native&#39;;

const Parent = () =&gt; {
  const [textFromChild, setTextFromChild] = React.useState(&#39;&#39;);

  const handleCallback = (text) =&gt; {
    setTextFromChild(text);
  };

  return (
      &lt;Text&gt;{textFromChild}&lt;/Text&gt;
      &lt;Child handleCallback={handleCallback} /&gt;
  );
};

const Child = (props) =&gt; {
  const [text, onChangeText] = React.useState(&#39;Text&#39;);

  const _onChangeText = (text) =&gt; {
    onChangeText(text);
    props.handleCallback(text)
  };

  return (
      &lt;TextInput
        onChangeText={_onChangeText}
        value={text}
      /&gt;
  );
};

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(&quot;&quot;);
  let hdInput =  (ht) =&gt; {
    console.log(&quot;ht&quot;, ht)

    setHt(ht);

  }

return(
       &lt;View&gt;
             &lt;HdParameter hdInput={hdInput} text={&quot;Ht (cm): &quot;} /&gt;
       &lt;/View&gt;
)
}

export default function HdParameter(props){
    let [param, setParam] = React.useState(&quot;&quot;);

    const _onChangeText = (text) =&gt; {
       setParam(text)
        props.hdInput(text);
    }
    
return(
        &lt;View style={AppStyles.hdParameter}&gt;
        &lt;Text style={AppStyles.boldText}&gt;{props.text}&lt;/Text&gt;
        &lt;TextInput
          style={[AppStyles.inputLight, { alignSelf: &quot;center&quot; }]}
          placeholder=&#39;&#39;
          defaultValue={props.defaultValue}
          placeholderTextColor={&quot;#1b2747&quot;}
          onChangeText={_onChangeText}
          value={param}
          keyboardType=&quot;numeric&quot;

        /&gt;
        
      &lt;/View&gt;
    )
}

答案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) =&gt; {
props.hdInput(param);
}

huangapple
  • 本文由 发表于 2023年2月23日 22:15:22
  • 转载请务必保留本文链接:https://go.coder-hub.com/75546008.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定