点击一个btn我想得到它的兄弟姐妹（输入框）值与useRef和复制到剪贴板，setState为该btn复制

Question

当用户传递一个有效的链接时，我正在使用一个缩短的URL应用编程接口，我获取应用编程接口，并用“映射medthod”呈现缩短的URL，使它们变成一个列表。它在每个映射的“缩短的URL”旁边都有一个btn，其中onClicki尝试复制ToClipboard，并将btn的状态从复制更改为复制。问题是，目前只有当我有1个项目时，它才能正常工作（点击btn与复制的工作正常），但是如果我有2个按钮，我点击复制的第一个btn到复制的剪贴板，它将聚焦映射列表中的最后一个项目，复制（最后一个项目）第二个btn的值，并为所有要复制的btn设置状态。我也不明白为什么当我把钥匙递给控制台时，我看不到带有键的li标签。有人能帮我吗？我只想复制我点击的btn的输入值的剪贴板。这是它看起来的样子——第一个btn第二个btn的onclick图像得到焦点

import { useForm } from "react-hook-form";
import axios from 'axios';
import Loading from '../../images/Ripple-1s-200px.svg';


const Shorten = () => {
    // get built in props of react hook form i.e. register,handleSubmit & errors / watch is for devs
    const { register, handleSubmit, formState: {errors} } = useForm();

    //1. set user original values to pass as params to url
    const [link, setLink] = useState('');

    //2. set loader initial values to false 
    const [loading, setLoading] = useState(false);

    //3. pass the fetched short link object into an array so we can map
    const [displayLinks, setDisplayLinks] = useState([]);

    //4. onSubmit form log data into link & showLoader for a breif moment
    const onSubmit = (data, event) => {
                event.preventDefault();
                //puttin data in a variable to pass as url parameter if valid
                setLink(data.userLink);
                //add loading here after data is set to state
                setLoading(!false);
            }

    //5. fetch the shortened url link using async method to show loading
    useEffect(() => {
        let unmounted = false;
        async function makeGetRequest() {
            try {
                let res = await axios.get('https://api.shrtco.de/v2/shorten', { params: { url: link } });
                //hid loader if u get response from api call
                    if (!unmounted && res.data.result.original_link) {
                        setLoading(false);

                        //add the data to displayLinks array to map
                        return setDisplayLinks(displayLinks => [...displayLinks, res.data.result]);
                    }

                } 
            catch (error) {
                console.log(error, "inital mount request with no data");
            }

        }
        //invoke the makeGetRequest here 
        makeGetRequest();
       
        return () => {
            unmounted = true;
        }

        //passing dependency to re-render on change of state value
    }, [link]);



    //6. intial State of copied or not button
    const [copySuccess, setCopySuccess] = useState('Copy');

    const inputRef = useRef(null);

    //7. onCick of button target it's short url right now it's selecting the last element 
    const copyToClipboard = (e) => {
        e.preventDefault();
        inputRef.current.select();
        document.execCommand('copy');
        // This is just personal preference.
        setCopySuccess('Copied');
      };

      console.log(displayLinks);
    return (
        <div>
            <form onSubmit={handleSubmit(onSubmit)}>
                <label></label>
                <input
                    {...register("userLink", {required: "Please add a link"})}
                    type="url"
                    id="userLink"
                />
                {errors.userLink && <span>{errors.userLink.message}</span>}
                <input type="submit" />
            </form>
            {
                loading ?
                    <div className="loader" id="loader">
                        <img src={Loading} alt="Loading" />
                    </div>
                        :   <ul>
                                {
                                    displayLinks.map((el) => {
                                        return (
                                            <li key={el.code}>
                                                <div>
                                                    <h5>{el.original_link}</h5>
                                                </div>
                                                {
                                                    /* Logical shortcut for only displaying the 
                                                    button if the copy command exists */
                                                    document.queryCommandSupported('copy') &&
                                                <form>
                                                    <input
                                                        ref={inputRef}
                                                        defaultValue={el.full_short_link}>
                                                    </input>

                                                    <button onClick={copyToClipboard}>{copySuccess}</button> 
                                                         
                                                </form>
                                                }
                                            </li>
                                        )
                                    })
                                }
                            </ul>
            }
        </div>
    )
}

export default Shorten;

Answer 1

这是因为所有链接都使用一个引用

您正在循环所有的链接，并给出他们的<代码>

也许不要使用refs，而是使用类似这样的替代功能copyToClipboard

const copyToClipboard = (url) => {
    const textField = document.createElement('textarea')
    textField.innerText = url
    document.body.appendChild(textField)
    if (window.navigator.platform === 'iPhone') {
      textField.setSelectionRange(0, 99999)
    } else {
      textField.select()
    }
    document.execCommand('copy')
    textField.remove()
    
    setCopySuccess('Copied');
  }

或

使用类似于react copy to clipboard

也请通过这个链接