尝试在本机反应中将值从子项返回到父项答案

【问题标题】：Trying to return value from child to parent in react native尝试在本机反应中将值从子项返回到父项
【发布时间】：2023-02-23 23:40:49
【问题描述】：

我正在尝试调用一个 textinput 子组件，然后从该组件获取一个 textinput 值。我正在尝试将值传递回父级。但是，我一直将空值返回给父级。我似乎找不到我的错误。我究竟做错了什么？

家长

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("");

    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>
    )
}

【问题讨论】：

标签： react-native

【解决方案1】：

你只是忘了在 HdParameter 中的 hdOutput 函数中添加一个参数。

通常你需要这样制作函数：

let hdOutput = (param) => {
   props.hdInput(param);
}

【讨论】：

【解决方案2】：

这是一段简单的代码，展示了如何从子组件获取一些数据。

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;

警告我可以看到你使用了一个名为 onInput 的道具。它似乎不存在于 React Native 的 TextInput 组件中。那么也许它是您项目中的自定义组件？

这是您更新的代码：

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>
    )
}

【讨论】：