为什么这个 Inputs 共享相同的值？

Question

我有这个输入组件

const Input = (props) => {
    return (
        <View>
            <TextInput
                onChangeText={(text) => {
                    props.setValue(text);
                }}
            />
        </View>
    )
}

我在这段代码中使用它，可以呈现两个不同的视图，但是一个输入的值与另一个共享，当我在一个中写一些东西并更改到另一个视图时，同样的事情我写的出现在这个输入中。

const [emailScreen, setEmailScreen] = useState(false);

const [name, setName] = useState('');
const [lastNames, setLastNames] = useState('');
const [email, setEmail] = useState('');

{ !emailScreen ? (
                // But for example in this view where there are two inputs, tha value
                // doesn't get shared between them.

                <View style={styles.inputsContainer}>
                    // It only shares the same thing this one
                    <Input
                        setValue={(value) => {
                            setName(value);
                        }}
                    />
                    <Input
                        setValue={(value) => {
                            setLastNames(value);
                        }}
                    />
                </View>
            ) : (
                <View>
                    // With this one
                    <Input                        
                        setValue={(value) => {
                            setEmail(value);
                        }}
                    />
                </View>
)}

完整代码如下：

https://codeshare.io/3ApDzv

https://codeshare.io/j0ve7P

Answer 1

正如@windowsill 所说，您的输入不受控制。

请将 value prop 添加到您的文本输入中。

供您输入：

const Input = (props) => {
    return (
        <View>
            <TextInput
                onChangeText={(text) => {
                    props.setValue(text);
                }}
                value={props.value} // <- add value prop here
            />
        </View>
    )
}

对于您的输入组件的实例：

{ !emailScreen ? (
  <View style={styles.inputsContainer}>
      // It only shares the same thing this one
      <Input
          value={name} // <- add here
          setValue={(value) => {
              setName(value);
          }}
      />
      <Input
          value={lastName} // <- add here
          setValue={(value) => {
              setLastNames(value);
          }}
      />
  </View>
) : (
  <View>
      // With this one
      <Input                        
          setValue={(value) => {
              setEmail(value);
          }}
          value={email} // <- add here
      />
  </View>
)}

为什么这个 Inputs 共享相同的值？

Why are this Inputs sharing the same value?

textinput

react-native

expo

react-props

use-state