React Native 从子组件中获取价值答案

【问题标题】：React Native get value from a child componentReact Native 从子组件中获取价值
【发布时间】：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 组件。

最好的方法是什么？

感谢您的帮助！

【问题讨论】：

标签： javascript react-native components

【解决方案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)
            }}
            />

【讨论】：