React Native 从子组件中获取价值

Posted 2023-02-23

【中文标题】React Native 从子组件中获取价值

【英文标题】：React Native get value from a child component

【发布时间】：2021-11-10 00:33:19

【问题描述】：

我有两个简单的组件：

const AddUserInfo = () => 

    const scroll = useRef(null)


    return (

        <View style= styles.container >
            <View style= styles.slider >
                    <ScrollView
                    ref=scroll
                    horizontal= true
                    snapToInterval= width
                    decelerationRate= "fast"
                    showsHorizontalScrollIndicator= false
                    bounces= false
                    >

                    <Animated.View style=flex: 1, width: width >
                    <Slider1 style=flex: 4/>
                        <Animated.View style=flex: 2, justifyContent: 'flex-end', alignItems: 'center'>
                            <TouchableOpacity style=styles.buttonCircle onPress=() =>  
                                if(scroll.current) 
                                    scroll.current.scrollTo( x: width, y: 0, animated: true );
                                    
                                />
                        </Animated.View>
                    </Animated.View>

还有这个：

const Slider1 = () => 

    const [pseudo, setPseudo] = useState("")



    return (
        <Animated.View style=flex: 4>
            
                <TextInput
                mode="outlined"
                value=pseudo
                label="Pseudo"
                placeholder="Pseudo"
                onChangeText= (pseudo) => setPseudo(pseudo)
                />
            
        </Animated.View>
    )

为了保持一切干净，它们位于不同的文件中。 我在这里要做的是从 Slider1 组件中获取“伪”值，并能够将其用于 AddUserInfo 组件。

最好的方法是什么？

感谢您的帮助！

【参考方案1】：

最直接的解决方案是让您的 Slider 组件接受一个回调属性，该属性在状态更改时调用，并传递更新的伪值。

const  useState, useRef, useEffect = React;

function App() 
  const [input, setInput] = useState('');
  
  const sliderCallback = (v) => 
    setInput(v);
    console.clear();
    console.log(`Slider changed to: $v`);
  
  
  return (
    <div>
    <Input callback=sliderCallback />
    <p>input</p>
    </div>
  )


function Input(callback) 
  const [pseudo, setPseudo] = useState('');
  
  useEffect(() => 
    callback(pseudo);
  , [pseudo])
  
  return (
    <input type='text' onInput=(e) => (setPseudo(e.target.value)) /> 
  )


ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<div id='root'></div>

【参考方案2】：

您可以将父组件中的回调函数传递给子组件，然后在子组件中调用该回调函数并将值传递给父组件

在这个例子中：

家长：

<Slider1 style=flex: 4 onChangeValue=(value) =>  /* do sth with the value *//>

在子组件中

<TextInput
            mode="outlined"
            value=pseudo
            label="Pseudo"
            placeholder="Pseudo"
            onChangeText= (pseudo) => 
                setPseudo(pseudo)
                this.props.onChangeValue(value)
            
            />