您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

11.3 添加功能(react数据列表渲染于子组件及子组件动态传参到父组件函数和style行内样式的使用)

发布时间：2025-03-02 16:15:51编辑：雪饮阅读（）

接续上篇，接下来我们来完善事件。
首先填写表单应该在点击添加的时候才显示，点击表单的取消的时候才关闭。
默认情况下肯定是关闭的。
所以AddButton.js重新修改为：
function AddButton({addClick}) {
    return (
        <button id="add-question-btn" className="btn btn-success" onClick={addClick}>添加问题</button>
    );
}
export default AddButton;
QuestionForm.js修改为：
function QuestionForm({canCelAddClick}){
    return (
        <form name="addQuestion" className="clearfix">
            <div className="form-group">
                <label htmlFor="qtitle">问题</label>
                <input type="text" className="form-control" id="qtitle" placeholder="您的问题的标题"/>
            </div>
            <textarea className="form-control" rows="3" placeholder="问题的描述"></textarea>
            <button className="btn btn-success pull-right">确认</button>
            <button className="btn btn-default pull-right" onClick={canCelAddClick}>取消</button>
        </form>
    );
}
export default QuestionForm;
然后App.js里面App方法体内定义用于显示隐藏表单的state以及对应取消和增加按钮的事件处理，
const [isVisible,setIsVisible]=React.useState(false);
const addClick=()=>{
    setIsVisible(true);
}
const canCelAddClick=()=>{
    setIsVisible(false);
}
 
以及return里面对上面的添加按钮和表单里面取消按钮的事件的传递及表单显示隐藏的渲染。
<AddButton addClick={addClick}/>
{isVisible && <QuestionForm canCelAddClick={canCelAddClick}/>}
接下来咱们来完成表单数据提交后添加到问题列表并重置表单以及关闭表单。
所以QuestionForm.js修改为：
function QuestionForm({canCelAddClick,handleSubmit,handleFormChange}){
    return (
        <form name="addQuestion" className="clearfix" onSubmit={handleSubmit}>
            <div className="form-group">
                <label htmlFor="qtitle">问题</label>
                <input type="text" className="form-control" name="title" id="qtitle" placeholder="您的问题的标题" onChange={handleFormChange} />
            </div>
            <textarea name="description" className="form-control" rows="3" placeholder="问题的描述" onChange={handleFormChange}></textarea>
            <button className="btn btn-success pull-right">确认</button>
            <button className="btn btn-default pull-right" onClick={canCelAddClick}>取消</button>
        </form>
    );
}
export default QuestionForm;
然后App.js里面传递给表单事件处理（提交和表单元素的change事件）
{isVisible && <QuestionForm canCelAddClick={canCelAddClick} handleSubmit={handleSubmit} handleFormChange={handleFormChange}/>}
那么问题列表的数据要定义一个可以改变的事件
const [QuestionListData,SetQuestionListData]=React.useState([
    {
        title:'产品经理与程序员矛盾的本质是什么？',
        description:'理性探讨，请勿撕逼。产品经理的主要工作职责是产品设计。接受来自其它部门的需求，经过设计后交付研发。但这里有好些职责不清楚的地方。',
        voteCount:22
    },
    {
        title:'热爱编程是一种怎样的体验？',
        description:'别人对玩游戏感兴趣，我对写代码、看技术文章感兴趣；把泡github、stackoverflow、v2ex、reddit、csdn当做是兴趣爱好；遇到重复的工作，总想着能不能通过程序实现自动化；喝酒的时候把写代码当下酒菜，边喝边想敲；不给工资我也会来加班；做梦都在写代码。',
        voteCount:22
    }
]);
然后并定义表单元素值改变事件应对的处理函数和表单提交应对的处理函数
const handleFormChange=(e)=>{
    var value=e.target.value;
    var name=e.target.name;
    setFormData({...formData,[name]:value});
}
const handleSubmit=(e)=>{
    e.preventDefault();
    console.log("formData",formData);
    var newQuestionItem={
        voteCount:0,
        ...formData
    }
    console.log("newQuestionItem",newQuestionItem);

    SetQuestionListData([...QuestionListData,newQuestionItem]);
    e.target.reset();
    setIsVisible(false);
}
接下来我们要修复下之前遗漏的一个问题就是投票的上下箭头不显示，原来我安装的bootstrap版本是5了，新版中对于图标样式使用有了变化。
不过我是换了这个版本类似的图标，并且根据自身样式也调整了一下。
所以调整后的QuestionItem.js组件如：
/*
这里不要用key代替index，不然会提示key未定义,如下用法就是错的
function QuestionItem({key,index,item,voteHandle})
可能是key是内部有被占用了的原因吧。
即使从list组件哪里传递了key
*/
function QuestionItem({index,item,voteHandle}){
    return (
        <div className="media" style={{clear:"both"}}>
            <div className="media-left" style={{
                display:"flex",
                flexDirection:"column"
            }}>
                <button className="btn btn-default" onClick={()=>voteHandle(index,1)}>
                    <i className="bi bi-arrow-up-circle"></i>
                </button>
                <span className="vote-count">{item.voteCount}</span>
                <button className="btn btn-default" onClick={()=>voteHandle(index,-1)}>
                    <i className="bi bi-arrow-down-circle"></i>
                </button>
            </div>
            <div className="media-body">
                <h4 className="media-heading">{item.title}</h4>
                <p>{item.description}</p>
            </div>
        </div>
    );
}
export default QuestionItem;
当然之前App.js中引入的bootstrap.min.css也不对了，应该是替换为如下两个css
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-icons/font/bootstrap-icons.css';
当然前提是你也安装了如下：
npm install bootstrap-icons
接下来我们还要做投票排序，票数最多的排最前面。
所以我们修改下App.js里面的投票处理函数如：
const voteHandle=(index,val)=>{
    console.log("voteHandle index",index);
    console.log("voteHandle val",val);

    var newQuestionListData=QuestionListData.map((item,subIndex) =>{
            if(subIndex === index){
                var newItem=item;
                newItem.voteCount=newItem.voteCount+val;
                return newItem;
            }else{
                return item;
            }
        }
    );
    newQuestionListData.sort((a,b)=>{
        return b.voteCount-a.voteCount
    })
    SetQuestionListData(newQuestionListData);
}
最后的完整效果