Question

我有3个输入和按下加号按钮时，我想再添加3个输入，以保持他的状态，

像这样的状态

state={
 toolsUsed: [
      {
        id: (Math.random() * 150).toString(),
        name: '',
        price: '',
        count: '',
      },
     {..},
    ],
}

在前3个输入组件中，我想在添加更改值文本时使用此值设置状态！

但是我尝试过，但是在更改文本后我进入了状态

toolsUsed => [" ","text"]

我要实现的目标

toolsUsed => [{name:'text",count:'..',price:'....',id:'..'},{...}]

UI

这是我的代码

renderToolsUsed = () => {
   const {toolsUsed} = this.state;
   const prom = toolsUsed.map(({name, id, price, count}, i) => {
      return (
        <View>
          <View style={styles.toolsItem}>
            <TextInput
              onChangeText={name =>
                this.setState(
                  prevState => {
                    return {
                      ...prevState,
                      toolsUsed: [prevState.toolsUsed[i].name, name],
                    };
                  },
                  () => console.log(this.state.toolsUsed),
                )
              }
              value={name}
              key={id}
            />
          </View>


          <View style={styles.toolsItem}>
            <TextInput
              onChangeText={count => this.setState({})}
              value={count}
              key={id}
            />
          </View>

          <View style={styles.toolsItem}>
            <TextInput
              onChangeText={price => this.setState({})}
              value={price}
              key={id}
            />
          </View>
          <TouchableOpacity onPress={() =>
          this.setState(prevState => {
            return {
              ...prevState,
              toolsUsed: prevState.toolsUsed.length + 1,
            };
          })
        }> **// heres i got error "toolsUsed.map not a function**
            <Text>+</Text>
          </TouchableOpacity>
        </View>
      );
    });

     return prom;
   }

JSX

...
render(){
  return(
      <View style={styles.toolsContainer}>
            <Text>
              Tools
            </Text>
            {this.renderToolsUsed()}
        </View>
     );
 }

编辑〜1

也许是：D求解加函数

 onPress={() => {
                let newInput = this.state.toolsUsed.length;
                this.setState(prevState => ({
                  toolsUsed: prevState.toolsUsed.concat([newInput]),
                }));
         }

Answer 1

您必须在状态更新中执行类似的操作。这不是很漂亮，但是您对状态的编辑非常深入。

这应在您所在州的toolsUsed属性中编辑第i个元素的名称：

onChangeText = {name =>
    this.setState(
        prevState => {
            return {
                toolsUsed: [
                    ...prevState.toolsUsed.slice(0, i),
                    {
                        ...prevState.toolsUsed[i],
                        name
                    },
                    ...prevState.toolsUsed.slice(i + 1)
                ],
            };
        },
        () => console.log(this.state.toolsUsed),
    )
}

请注意，您的TouchableOpacity onPress也会破坏您的状态。它用数字替换数组。

您编辑的函数仍然没有将正确的新条目添加到数组。它应该添加具有相同结构的对象。它应该看起来像这样：

onPress={() => {
    let newInput = {id: generateId(), name: '', price: '', count: '',};
    this.setState(prevState => ({
        toolsUsed: [...prevState.toolsUsed, newInput],
    }));
}}

正如您在评论中提到的那样，缺少的最后一个修复方法是向映射数组中的每个视图添加稳定键，如下所示：<View key={i} >..</View>

如何在React Native中添加动态输入？

1 个答案: