javascript - 如何在 native react 中添加动态输入？

Question

我有 3 个输入和加号按钮，当按下它时我想添加另外 3 个输入，以便根据他的状态，

这样的状态

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

在前 3 个输入组件中，我希望在添加更改值文本时使用该值设置状态!

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

toolsUsed => [" ","text"]

我想要实现什么

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

用户界面

这是我的代码

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]),
                }));
         } 

编辑 ~ 2

我添加了一个减号按钮来删除工具数组中的最后一个对象，这里有两种方法来处理它，但是我在第一种方法上有一些奇怪，它工作得很好，我不知道为什么!但是当我首先评论 var newInput 时，它不会删除最后一项

onPress={() => {
        // first way
         let newInput = this.state.toolsUsed.pop();
         this.setState(prevState => ({
              toolsUsed: prevState.toolsUsed.filter(
                 tool => tool.id !== id,
               ),
         }));
       // Second
         let rowDeleted = [...this.state.toolsUsed];
         rowDeleted.splice(-1, 1);
         this.setState({toolsUsed: rowDeleted});
 }}

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 ，如下所示:<View key={i} >..</View>