如何在本机反应中添加动态输入？

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

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