我只想在Reactjs中发送1个项目

2w2cym1i  于 2022-12-22  发布在  React
关注(0)|答案(1)|浏览(167)

我在这里遇到了一点麻烦，当我执行onClick时，我希望我可以获取1个项目，并且handleUpdate（）工作得很好

const [langs,setLangs] = useState([]); 

function handleUpdate(item){
    console.log(item);
}
{langs.map((item, index) => {
<tr key={index}>
    //Some code here
    <td className='text-primary' 
        style={{maxHeight: '21px',width: '8%',maxWidth: '300px'}} 
        onClick={()=>handleUpdate(item)}>
              <ModalEditNgonNgu item={item}/>
    </td> 
</tr>
}

但我不知道为什么在“ModalEditNgonNgu”中我像这样呈现所有项目enter image description here
当我尝试编辑时，无论我点击什么，它都只能显示第一项。这是ModalEditNgonNgu：

import '../../css/style.css';
import { useEffect } from "react";
import { useState, useSelector } from "react";
import { ajaxCallGetUrlDemo, ajaxCallPost } from "../libs/base";
import Select from 'react-select'
import { Const_Libs } from "../libs/Const_Libs";
import languagesList from "./languageList/country";
import { get } from 'jquery';

const ModalEditNgonNgu = (props) => {
const { handleGetLanguage } = props;
const [langName, setLangName] = useState("");
const [mainLangs, setMainLangs] = useState([]);
const [mainLang, setMainLang] = useState("");
const [titleLang, setTitleLang] = useState("");
const [describeLang, setDescribeLang] = useState("");
const [authorLang, setAuthorLang] = useState("");
const [rateLang, setRateLang] = useState("");
const [reviewsLang, setReviewsLang] = useState("");
const [translateList, setTranslateList] = useState([]);

const mainLangOptions = [
    { value: 'vi', label: 'Vietnamese' },
    { value: 'en', label: 'English' },
    { value: 'zh', label: 'Chinese' },
    { value: 'ja', label: 'Japanese' },
    { value: 'de', label: 'German' },
];
console.log(props.item);

const handleMainLang=(e)=>{
    const getMainLang = e.target.value;
    setMainLang(getMainLang);
}

const handleTransList=(e)=>{
    const getTransList = e.target.value;
    setTranslateList(getTransList);
}

const handleSubmit = () => {
    let arr = [{
        nameLanguage: langName,
        mainLanguage: mainLang,
        titleLanguage: titleLang,
        descriptionLanguage: describeLang,
        authorLanguage: authorLang,
        rateLanguage: rateLang,
        reviewsLanguage: reviewsLang,
        transLanguage: translateList
    }]
    console.log(arr);
    resetData();
    props.editLang(arr,props.item.id);
}

const resetData = () => {
    setLangName("");
    setMainLang("");
    setTitleLang("");
    setDescribeLang("");
    setAuthorLang("");
    setRateLang("");
    setReviewsLang("");
    setTranslateList([]);
}

return (
    <>
        <button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModalEditNgonNgu" style={{ fontSize: '14px' }}>
        {props.item.language_name}
        </button>
        <div>
            <div className="modal fade" id="myModalEditNgonNgu">
                <div className="modal-dialog modal-dialog-centered" style={{ minWidth: '700px' }}>
                    <div className="modal-content">
                        <div className="modal-header">
                            <h4 className="modal-title">Sửa ngôn ngữ</h4>
                            <button type="button" className="btn-close" data-bs-dismiss="modal" />
                        </div>
                        <div className="modal-body">
                            <form>
                                <div className="col">
                                    <div className="row-2">
                                        <label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Tên ngôn ngữ</label>
                                        <input type="text"
                                            className="form-control" id="name-campaign"
                                            placeholder="Nhập tên ngôn ngữ...."
                                            defaultValue={props.item.language_name}
                                            onChange={(e) => setLangName(e.target.value)}
                                        />
                                    </div>
                                    <div className="row-2">
                                        <label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Tiêu đề</label>
                                        <input type="text"
                                            className="form-control" id="name-campaign"
                                            placeholder="Nhập tiêu đề...."
                                            defaultValue={props.item.title_lang}
                                            onChange={(e) => setTitleLang(e.target.value)}
                                        />
                                    </div>
                                    <div className="row-2">
                                        <label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Mô tả</label>
                                        <input type="text"
                                            className="form-control" id="name-campaign"
                                            placeholder="Nhập mô tả...."
                                            defaultValue={props.item.describe_lang}
                                            onChange={(e) => setDescribeLang(e.target.value)}
                                        />
                                    </div>
                                    <div className="row-2">
                                        <label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Tác giả</label>
                                        <input type="text"
                                            className="form-control" id="name-campaign"
                                            placeholder="Nhập tác giả (VD: Author)"
                                            defaultValue={props.item.author_lang}
                                            onChange={(e) => setAuthorLang(e.target.value)}
                                        />
                                    </div>
                                    <div className="row-2">
                                        <label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Đánh giá</label>
                                        <input type="text"
                                            className="form-control" id="name-campaign"
                                            placeholder="Nhập đánh giá (VD: Rate)"
                                            defaultValue={props.item.rate_lang}
                                            onChange={(e) => setRateLang(e.target.value)}
                                        />
                                    </div>
                                    <div className="row-2">
                                        <label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Lượt đánh giá</label>
                                        <input type="text"
                                            className="form-control" id="name-campaign"
                                            placeholder="Nhập lượt đánh giá (VD: reviews)"
                                            defaultValue={props.item.reviews_lang}
                                            onChange={(e) => setReviewsLang(e.target.value)}
                                        />
                                    </div>
                                </div>
                                <div className="col">
                                    <div className="row-2">
                                        <label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Ngôn ngữ chính</label>
                                        <Select 
                                            onChange={(e) =>setMainLang(e)}
                                            options={mainLangOptions}
                                        />
                                    </div>
                                    <div className="row-2">
                                        <label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Những ngôn ngữ dịch</label> 
                                        <Select 
                                            onChange={(e) =>setTranslateList(e)}
                                            isMulti
                                            isSearchable={true}
                                            options={languagesList}
                                        />
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-success" data-bs-dismiss="modal" onClick={handleSubmit}>Update</button>
                            <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </>
);
}

export default ModalEditNgonNgu;

对不起，如果我写的模棱两可，但我想采取正确的'项目'每当我点击按钮，有语言_名称。我该怎么办？

reactjs

1条答案

按热度按时间
oalqel3c

oalqel3c1#

你的问题中没有足够的信息。我将尽我所能在当前的背景下帮助你解决你的问题。
您的代码中存在以下几个问题：

模态可见性

当你呈现条目列表时，你会不断地为每个条目呈现ModalEditNgonNgu。我相信这不是你想要得到的行为。假设你想显示你点击的条目，你可以这样做：

function App() {
    const [langs,setLangs] = useState([]);
    const [selectedItem, setSelectedItem] = useState(undefined);
    
    function handleUpdate(item){
        console.log(item);
        setSelectedItem(item);
    }

    return (<>
        <table>
            {langs.map((item, index) => {
                <tr key={index}>
                //Some code here
                    <td className='text-primary' style={{maxHeight: '21px',width: '8%',maxWidth: '300px'}} onClick={()=>handleUpdate(item)}>
                        This is item {item.id}
                    </td> 
                </tr>
             }
        </table>
       {selected Item && <ModalEditNgonNgu item={selectedItem}/>}
    </>);
}

在这段代码中，我们将选定项保存在一个状态中，并基于选定项创建一个single模型。
请注意，这个解决方案不是最佳的。大多数Modal实现在显示和消失时都有一些动画，应该通过属性而不是DOM显示。我猜您正在使用Bootstarp，所以考虑使用一些React Package 器，如React-Boostrap和其他。

密钥属性

当你在一个循环中渲染一堆组件时，比如map，你必须为子元素定义一个唯一的key属性，让React跟随并匹配不同的渲染。
您添加了<tr key={index}>，这是可以的，但不好的做法。键应该是唯一的，索引是不是一个好的key值。key的主要目标是让react跟踪您的组件。如果您删除/插入列表中间的项目，不同的项目将具有相同的键在不同的渲染中。
因为你的条目有一个id属性，你最好使用<tr key={item.id}>。

箭头的功能相当于 prop

执行<td ... onClick={()=>handleUpdate(item)}>也可以，但是它会在每次呈现时创建一个新的函数示例，它会在每次重新呈现列表时重新呈现列表中的每一项。
这在轻量级示例中可能没问题，但在复杂列表中可能会导致性能问题，因此应该避免。

赞(0）分享  回复(0）举报  2022-12-22
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com