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

更改输入时，可以将输入保存在单独的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 2

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

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

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

点击按钮时，您可以使用输入状态的值继续传递

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

Answer 3

您需要将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 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>
        )
    }
}

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

4 个答案: