Question

我正在创建一个表单，需要在其中输入数据。但是，一旦我按下该键，键盘就会自动隐藏，并且我无法进行持久输入。

假设我正在输入产品名称或库存任何东西，这种输入是永久性的，但是当我在每个按键式键盘上输入“变体”部分时，都会自动隐藏。

这是代码库-

AddNewProductScreen.js

....

constructor(props) {
super(props);
this.state = {
  product: {
    name: '',
    category: '',
    type: 'packet',
    brand: '',
    variants: [
      {
        value: '',
        price: '',
      },
    ],
    stock: '',
  },
};

....

<Input
  inputContainerStyle={{borderBottomColor: 'transparent'}}
  inputComponent={() => (
    <View>
      {this.state.product.variants.map((item, index) => (
        <View key={index} style={[mainStyles.row, {marginTop: 10}]}>
          <View style={mainStyles.col6}>
            <Input
              label="Value"
              placeholder="500 gm or 1 pc"
              value={this.state.product.variants[index].value}
              onChangeText={value => {
                let variants = this.state.product.variants;
                variants[index].value = value;
                this.setState({
                  product: {
                    ...this.state.product,
                    variants,
                  },
                });
              }}
            />
          </View>
          <View style={mainStyles.col5}>
            <Input
              label="Price"
              keyboardType="numeric"
              placeholder="50"
              value={this.state.product.variants[index].price}
              onChangeText={price => {
                let variants = this.state.product.variants;
                variants[index].price = price;
                this.setState({
                  product: {
                    ...this.state.product,
                    variants,
                  },
                });
              }}
            />
          </View>
          <View style={[mainStyles.col1, {justifyContent: 'center'}]}>
            <Icon
              name="times"
              size={25}
              color="red"
              type="font-awesome"
              containerStyle={{
                display: `${
                  this.state.product.variants.length > 1 ? 'flex' : 'none'
                }`,
              }}
              onPress={() => {
                let variants = this.state.product.variants;
                variants.splice(index, 1);
                this.setState({
                  product: {
                    ...this.state.product,
                    variants,
                  },
                });
              }}
            />
          </View>
        </View>
      ))}
    </View>
  )}
/>
....

期望：在变体输入（值和价格）中，我需要像其他输入字段一样进行持续输入。

谢谢。

PS-添加屏幕截图以供参考

Answer 1

      {this.state.product.variants.map((item, index) => (
        <View key={index} style={[mainStyles.row, {marginTop: 10}]}>
          <View style={mainStyles.col6}>
            <Input
              label="Value"
              placeholder="500 gm or 1 pc"
              value={this.state.product.variants[index].value}
              onChangeText={value => {
                let variants = this.state.product.variants;
                variants[index].value = value;
                this.setState({
                  product: {
                    ...this.state.product,
                    variants,
                  },
                });
              }}
            />
          </View>

这里的问题是 this.state.product.variants 会根据输入字段中的值进行更改，因此该列表中的内容会在每次按键时再次安装。我建议您尝试一种不映射输入字段的方法，它们将在父级的整个生命周期中保留在组件树中。

键盘上的键盘会在自动响应时自动隐藏

1 个答案: