单击按钮时获取数组内的输入值

Question

我想在单击按钮时获取数组内的输入值。如何将输入值传递给按钮的功能。

任何帮助将不胜感激。谢谢

import React, { useState, useEffect } from 'react'
export default function Todo(props) {

const [todo,settodo] = useState([]);

function getdata(){
  //fetch data
  settodo(data);
}


function SaveInput(id){

}

useEffect(() => {
   getdata();
},[]);

return (

    <React.Fragment>
        <div>
            {todo.map(function(item, key){
                return <div>
                    <div>{item.name}</div>
                    <div>
                        <input type="text" name="inputval" onChange={() => handleChange(e)}>
                        <button onClick={()=> SaveInput(item.id)}></button>
                    </div>
                </div>
            })}
        </div>
    </React.Fragment>

)
}

Answer 1

您需要将item.id 发送到您的handleChange 函数，

<input type="text" name="inputval" onChange={(e) => handleChange(e,item.id)} />

你handleChange函数应该，

const handleChange = (e,id) => {
  let val = e.target.value;
  setInputVal(prevState =>({
      ...prevState, 
      [id]:val
  }))
}

您必须定义一个状态来存储输入值，

const [inputVal,setInputVal] = useState({});

点击按钮即可进入输入状态，

function SaveInput(id){
  console.log(inputVal[id]);
}

Demo

Answer 2

您可以在输入更改时将输入保存在单独的 useState 中，以便稍后在按钮单击事件期间轻松检索。

下面的代码是一个示例，未经测试，但应该让您知道如何继续。

import React, { useState, useEffect } from 'react'
export default function Todo(props) {

const [todo,settodo] = useState([]);
const [inputVal, setInputVal] = useState({});

function getdata(){
  //fetch data
  settodo(data);
}


function SaveInput(id){
 let inputVal = inputVal[id];
 // do other stuff.
}

useEffect(() => {
   getdata();
},[]);

return (

    <React.Fragment>
        <div>
            {todo.map(function(item, key){
                return <div>
                    <div>{item.name}</div>
                    <div>
                        <input type="text" name="inputval" onChange={(e) => setInputVal({...inputVal, [item.id]: e.target.value })}>
                        <button onClick={()=> SaveInput(item.id)}></button>
                    </div>
                </div>
            })}
        </div>
    </React.Fragment>

)
}

Answer 3

一种常见的模式是使用input 上的handleChange(event) 函数来设置具有当前值的状态。

const [input,setInupt] = useState("");

function handleChange(event) {
    setInput(event.target.value)    
}

并且当按钮被点击时，可以使用输入状态的值来传递

<button onClick={()=> console.log(input))}>

Answer 4

首先，如果您有一个 onChange 方法，那么您也必须为该输入设置一个值，否则它将显示“不受控制的输入”的警告，并且除非您提供，否则该输入框对您没有用处给它一个价值。

其次，您应该为这些输入框的值使用状态，然后您可以在保存按钮单击功能中访问输入的值。这是您如何做到这一点的示例。

import React from 'react'

export default class Todo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            inputIDs: {}
        }
    }

    SaveInput = id => {
        console.log("input value:", this.state[id]);
    };

    handleChange = (e, id) => {
        this.setState({[id]: e.target.value});
    };

    render() {
        const {inputIDs} = this.state;
        const todo = [
            {id: 1, val: "abc", name: "lorem"},
            {id: 2, val: "xyz", name: "Ipsum"}
        ];

        let todos = todo.map((item, key) => {
            return <div key={key}>
                <div>{item.name}</div>
                <div>
                    <input type="text" value={this.state[item.id]} onChange={(e) => this.handleChange(e, item.id)}/>
                    <button onClick={() => this.SaveInput(item.id)}>Click Me!</button>
                </div>
            </div>
        });

        return (
            <React.Fragment>
                {todos}
            </React.Fragment>
        )
    }
}