在 React JS 中创建 元素

2024-03-02

---

我正在react.js 中重写我的网络应用程序的UI，并且我对以下问题有点困惑。

我有一个页面显示通过 AJAX 请求获取的数据，在该页面下方显示一个用于提交新数据的表单。都好。

现在，我想添加一个<select>元素到表单，并从不同的位置 (url) 获取值。

当前代码（不带<select>）看起来像这样（稍微简化了一点，但所有工作细节都是相同的；它主要遵循react.js网站上的教程）：

var tasks_link = $('#tasks_link');

var getDataMixin = {
        loadDataFromServer: function() {
            $.ajax({
                url: this.props.url,
                dataType: 'json',
                success: function(data) {
                    this.setState({data: data});
                }.bind(this),
                error: function(xhr, status, err) {
                    console.error(this.props.url, status, err.toString());
                }.bind(this)
            });
        },
        getInitialState: function() {
            return {data: []};
        },
        componentDidMount: function() {
            this.loadDataFromServer();
        }
    };

var sendDataMixin = {
        handleDataSubmit: function(senddata) {
            $.ajax({
                url: this.props.url,
                dataType: 'json',
                contentType: 'application/json',
                type: 'POST',
                data: senddata,
                success: function(data) {
                    var curr_d = this.state.data;
                    var curr_d_new = curr_d.concat([data]);
                    this.setState({data: curr_d_new});
                }.bind(this),
                error: function(xhr, status, err) {
                    console.error(this.props.url, status, err.toString());
                }.bind(this)
            });
        }
    };

var taskForm = React.createClass({
        handleSubmit: function() {
            var name = this.refs.task_name.getDOMNode().value.trim();
            if (!name) {
              return false;
            }
            this.props.onTaskSubmit(JSON.stringify({name: name}));
            this.refs.task_name.getDOMNode().value = '';
            return false;
        },
        render: function () {
            return (
                <form className="well base_well new_task_well" onSubmit={this.handleSubmit}>
                    <div className="form-group">
                        <div className="input-group">
                            <span className="input-group-addon no_radius">Task name</span>
                            <input type="text" className="form-control no_radius" id="add_new_project_input" ref="task_name"/>
                        </div>
                    </div>
                    <button type="button" className="btn btn-default no_radius add_button" id="add_new_task_btn" type="submit">Add task</button>
                </form>
            );
        }
    });

var taskBox = React.createClass({
        mixins: [getDataMixin, sendDataMixin],
        render: function () {
            return (
                <div id="project_box" className="taskBox"> <taskList data={this.state.data} />
                    <taskForm onTaskSubmit={this.handleDataSubmit}/> </div>
            );
        }
    });

tasks_link.click(function() {
        React.renderComponent(
            <taskBox url="/api/tasks/" />,
            document.getElementById('content_container')
        );
    });

现在，我可以添加一个select元素通过添加一个getDataMixin to TaskForm，获取数据并构建可能选项的列表，但我需要拥有包含许多列表的表单，并且该方法似乎无法扩展（由于命名冲突；或者我需要使用 mixin 以外的东西） 。

所以我想创建一个单独的React class，这只会有getDataMixin，通过父级设置接收 API urlprops，并渲染<select>元素;并在表单中使用此类。 但我不知道如何访问所选值（因为父级无法访问其子级的值）refs）。 所以我需要另一种方法来“向上”传递所选值。

或者，如果这是不可能的，那就朝正确的方向轻推——我不想最终得到大量不可重用的代码（我转而使用 React 的部分原因是使用 mixins 并保留代码保持在合理且可读的最低限度）。

只要您将子级设置为父级中的引用，父级就可以访问其子级的引用，您可以访问该子级中的任何引用。例如，像这样的东西this.refs.childRef.refs.nestedChildRef。然而，这是一个非常糟糕的主意，除非您只是阅读信息（并处理错误，例如引用不正确存在，因为父级不知道子级的引用是否设置正确）。

但幸运的是，有一个非常简单的解决方案。你是对的，你会想要创建一个获取自己数据的子组件，而不是一个 mixin。但是，如何处理将所选项目返回给父级只是将 onChange 函数从父级传递给内置的<select>在反应。

以下是这种父子关系的示例：

var MyParent = React.createClass({
    getInitialState: function() {
        return {
            childSelectValue: undefined
        }
    },
    changeHandler: function(e) {
        this.setState({
            childSelectValue: e.target.value
        })
    },
    render: function() {
        return (
            <div>
                <MySelect 
                    url="http://foo.bar"
                    value={this.state.childSelectValue}
                    onChange={this.changeHandler} 
                />
            </div>
        )
    }
});

var MySelect = React.createClass({
    propTypes: {
        url: React.PropTypes.string.isRequired
    },
    getInitialState: function() {
        return {
            options: []
        }
    },
    componentDidMount: function() {
        // get your data
        $.ajax({
            url: this.props.url,
            success: this.successHandler
        })
    },
    successHandler: function(data) {
        // assuming data is an array of {name: "foo", value: "bar"}
        for (var i = 0; i < data.length; i++) {
            var option = data[i];
            this.state.options.push(
                <option key={i} value={option.value}>{option.name}</option>
            );
        }
        this.forceUpdate();
    },
    render: function() {
        return this.transferPropsTo(
            <select>{this.state.options}</select>
        )
    }
});

上面的例子显示了一个父组件MyParent包括一个子组件MySelect它将 url 以及对标准反应有效的任何其他 props 传递给它<select>元素。使用内置的reactthis.transferPropsTo()将所有道具转移到孩子的功能<select>渲染函数中的元素。

这意味着父级定义changeHandler as the onChange处理程序MySelect将此函数直接传递给子函数<select>元素。因此，当选择更改时，事件将由父级而不是子级处理。顺便说一句，这是在 React 中完全合法且合法的做事方式 - 因为它仍然遵循自上而下的哲学。如果您考虑一下，当您使用普通的内置<select>从反应来看，这正是发生的事情。onChange只是一个属性<select>.

还值得注意的是，如果您愿意，您可以“劫持”更改处理程序以添加您自己的自定义逻辑。例如，我倾向于做的是包裹我的<input type="text" />具有自定义输入组件的字段，该组件接受任何和所有有效的<input>道具，但也需要validatorfunction 作为一个属性，它允许我定义一个函数，该函数根据输入到的值返回 true/false<input>场地。我可以通过定义来做到这一点onChange在父级中，对于包装器子级，但随后在子级中我定义了自己的onChange内部检查this.props.onChange被定义，和一个函数，然后运行我的验证器并通过调用将事件链传递回父级this.props.onChange(e, valid)。为父级提供完全相同的事件对象onChange处理程序，但还添加了布尔值valid争论。无论如何，我离题了......

希望这可以帮助你 ：）

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

---

javascript

jQuery

AJAX

Forms

ReactJS

在 React JS 中创建 元素 的相关文章

• 如何使用canvas.toDataURL()将画布保存为图像？

  我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J

• 如何使用 jest 模拟第三方库

  我正在开发一个node js应用程序使用nestjs我有一堂课叫LoggerService如下 export class LoggerService private logger Rollbar constructor this logge

• Ember.js 处理 View 事件后转换到路由

  Setup 我有一个 Ember 应用程序 支持使用 Imgur API 上传图像 我已经有一个工作路线和模板来处理任何 Imgur ID 但我想在上传新图像后转换到此路线 使用返回的 Imgur ID 这是该应用程序的相关部分 http

• 检查 touchend 是否在拖动后出现

  我有一些代码可以更改表的类 在手机上 有时表格对于屏幕来说太宽 用户将拖动 滚动来查看内容 但是 当他们触摸并拖动表格时 每次拖动都会触发 touchend 如何测试触摸端是否是触摸拖动的结果 我尝试跟踪dragstart和dragend

• 是否可以使用 javascript 测试用户的浏览器/操作系统是否支持给定类型的链接？

  是否可以使用 javascript 或其他任何东西 测试用户的操作系统 浏览器是否支持给定的 url 方案 例如 大多数仅使用网络邮件的用户计算机上未设置 mailto 是否有可能以某种方式捕获单击 mailto 链接的尝试并弹出比浏览器错

• 在为 RXJS 可观察量编写测试时，如何避免让调度程序通过我的业务逻辑？

  我发现使某些测试通过的唯一方法是显式地将调度程序传递给函数 为了便于说明 请考虑以下函数 function doStuff stream return stream delay 100 filter x gt x 2 0 map x gt

• Jquery 中的动态滚动位置

  请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件

• 是否有任何非轮询方式来检测 DOM 元素的大小或位置何时发生变化？

  很长一段时间以来 我一直在寻找一种方法来检测 DOM 元素的大小或位置何时发生变化 这可能是因为窗口调整了大小 或者因为向该元素添加了新的子元素 或者因为在该元素周围添加了新元素 或者因为 CSS 规则已更改 或者因为用户更改了浏览器的字体

• 将 javascript 整数转换为字节数组并返回

  function intFromBytes x var val 0 for var i 0 i lt x length i val x i if i lt x length 1 val val lt lt 8 return val func

• 使用流体网格系统在引导程序上对齐输入

  我正在创建一个表单 要求用户输入他们的姓名和电子邮件地址 表单的第一行对于姓名的每个部分都有两个并排的输入 第二行对于电子邮件地址有一个输入 其宽度应与第一行组合的宽度相同 我正在尝试使用流体网格系统 但无法将第二行与第一行对齐

• 类型“typeof import("/home/kartik/Desktop/Ecommerce/ecommerce/node_modules/firebase/index")”上不存在属性“auth”。 TS(2339)

  我是 FireBase 的初学者 我正在尝试使用 Angular 通过 FireBase 实现 Google 登录 我在 auth 时收到上述错误 我特此附上login component ts和package json package l

• 如何在jquery中获取保存时间和当前时间的差异？

  我想在 javascript 或 jquery 中获取保存时间和当前时间之间的时差 我节省的时间看起来像Sun Oct 24 15 55 56 GMT 05 30 2010 java中的日期格式代码如下 String newDate 201

• Select2 下拉列表动态添加、删除和刷新项目

  这让我发疯 为什么 Select2 不能在其页面上实现清晰的方法或示例如何在 Select2 上进行简单的 CRUD 操作 我有一个 select2 从 ajax 调用获取数据

• JavaScript 代码在不使用 ActiveX 的情况下截取网站屏幕截图

  我有一个用户与之交互的 JavaScript 应用程序 我需要保存当前界面的外观 裁剪出我需要的部分 或者通过指定div只拍摄我需要的部分 然后发送回服务器 显然任何外部服务都无法做到这一点 我需要一个 JavaScript 或Flash

• 如何获取 UIWebView 中元素的位置？

  我在 iPad 程序中加载了 html 的 UIWebView 通过使用 webkit column width 我将 html 分为几列 padding 0px height 1024px webkit column gap 0px we

• 无法在前端使用 JavaScript Fetch API 将文件上传到 FastAPI 后端

  我正在尝试弄清楚如何将图像发送到我的 API 并验证生成的token那是在header的请求 到目前为止 这就是我所处的位置 app post endreProfilbilde async def endreProfilbilde requ

• 如何在 javascript 正则表达式中匹配平衡分隔符？

  我原以为这个问题是不可能的 据我所知 Javascript 的正则表达式既没有递归插值 也没有漂亮的 NET 平衡组功能 但问题就在那里 如问题 12 所示正则表达式 alf nu http regex alf nu 匹配平衡对 lt an

• 显示覆盖以覆盖整个页面

  我有一个正在加载的网络应用程序iframe 我需要显示一个覆盖 div 来覆盖整个页面 问题是叠加层当前仅显示在iframe区域而不覆盖整个页面 我们的应用程序 子应用程序 是加载的一组应用程序的一部分iframe 你可以做这样的事情 di

• 防止文本区域出现新行

  我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas

• 在 GWT 中，在任何主机页标记上添加事件处理程序

  我想为任何标签添加 MouseOver 事件处理程序 举个例子 我想为旧版 HTML 页面中的每个锚点页面添加事件处理程序 继GWT指南 http code google com webtoolkit doc 1 6 DevGuideUse

随机推荐

• 跨行对 Pandas 数据框进行分组

  我有一个这样的csv client1 client2 client3 client4 client5 client6 amount Comp1 4 475000 Comp2 16 305584 Comp3 4 050000 Comp2 Co

• Android 上的电子邮件活动

  我想从 Android 虚拟机发送电子邮件到我的 Gmail 帐户 问题 但是按下发送按钮后我得到 没有应用程序可以执行此操作 这是我的代码 Intent sendIntent new Intent Intent ACTION SEND s

• GWT 中自动登录的会话和 Cookie

  我知道已经有很多问题了 但我似乎仍然没有找到明确的答案 我想要做的是让用户在登录两周后或直到他们注销之前被记住 以下是我认为应该发生的事情 我想知道是否有更多经验的人可以告诉我我是对还是错 用户首次登录 对服务器的 RPC 调用返回一个 U

• 如何发布c# windows应用程序安装程序

  我正在尝试发布 C Windows 应用程序 我尝试安装 Shield 和 Visual Studio 安装程序 但它无法正常工作 此安装程序只能安装在安装了 Visual Studio 的笔记本电脑或 PC 上 谁能帮助我需要什么先决条件

• 使用 gridsearchcv 的内存泄漏

  Problem 我的情况似乎是运行 gridsearchcv 时出现内存泄漏 当我运行 1 或 32 个并发工作线程 n jobs 1 时 会发生这种情况 以前我在 ubuntu 16 04 上运行过多次 没有出现任何问题 但最近升级到 1

• 当资源无法调用其他步骤并重试抛出异常的同一步骤时，如何处理 FlatFileItemReader 异常？

  我正在使用 Spring Batch 远程分区 我的第一步为所有其他步骤准备输入文件 其他步骤处理输入文件 要在所有 4 台服务器上创建输入文件 我的第一步应该在所有服务器上运行 因此 我在所有服务器上设置了消费者并发数 1 网格大小 4

• 从 UICollectionViewCell 呈现 UIPopoverController

  我希望通过 UICollectionViewCell 上的按钮呈现 UIPopoverController 到目前为止 一切都创建正常 但弹出窗口不可见 有什么特殊的方法可以做到这一点吗 如果我从集合视图单元格以外的任何其他位置显示该代码

• 推荐一些类似于 Bresenham 的二维球面映射算法？

  我需要最快的球体映射算法 就像布雷森纳姆的线条画一样 类似于我在 Star Control 2 旋转行星 中看到的实现 是否有任何已经发明和 或实施的技术 我真的不想重新发明自行车 请帮忙 问题描述 我在 2D 表面上有一个必须出现球体的位

• “setup”命名空间中没有定义命令：Magento 2

  我已经安装了latest version of Megento 2 前端 后端和功能一切正常 我有一个问题bin magento setup upgrade命令 当我在终端中运行此命令时 我得到以下异常 无效参数异常 setup 命名空间中

• 使用 UIKitForMac 时“令牌不是预处理器子表达式中的有效二元运算符”

  所以我正在尝试为 mac 编译我的 iOS 项目 当我尝试使用 if targetEnvironment UIKitForMac 我从标题中得到了错误 我尝试将构建目标设置为 iOS 13 但似乎没有任何效果 Objective C if

• 元素内的“u”属性

  由于我无法搜索到有意义的结果 因此我无法确定这不是重复的 但是 我在网站上运行 JSSOR 滑块 并且某些元素具有 u 属性 例如 div style width 100 height 500px 当我通过 W3 验证器运行此 u slid

• 是否有 R 函数用于查找向量中元素的索引？

  在 R 中 我有一个元素x和一个向量v 我想找到一个元素的第一个索引v等于x 我知道做到这一点的一种方法是 which x v 1 但这似乎效率太低了 有没有更直接的方法来做到这一点 对于奖励积分 是否有一个功能可以在以下情况下工作 x是一

• Angular2 在 ngSwitch 新视图创建后调用自定义函数

  我正在使用创建一个小应用程序Angular2 Ionic2 在这个应用程序中我想初始化google map into view segment当用户切换到map segment using ion segment 以下是示例代码结构

• 如何暂时禁用Spring缓存的缓存

  我有一个 spring bean 注释为 Cacheable像这样定义的注释 Service public class MyCacheableBeanImpl implements MyCacheableBean Override Cach

• 使用drawImage 进行裁剪在Safari 中不起作用

  我正在使用画布开发一些简单的图像处理功能 用户上传图像 能够旋转和裁剪图像 然后单击 确定 然后将图像分成两半 每一半绘制镜像到两个画布元素 如下所示 Original https i stack imgur com Bty5R jpg M

• 相同分辨率设备 1080x1920 中的 Android 间距问题

  我正在设计 Zeplin 的屏幕 Zeplin在dp中提供了每个项目的属性 以下是水平回收器视图Zeplin 的 4 个项目的设计示例 对于 xxhdpi 设备 360 dp 意味着 1080 我正在两台具有不同 dpi 的 1080 设备

• 括号配对 ({}[]()<>) 问题

  我希望能够将字符串中的所有括号配对 如果它们没有配对 那么它们会得到索引号和 False 看起来它一遍又一遍地重复一些值 即 cl pop 1 我试图找出问题出在哪里 但无论我如何努力 我都看不到它 所以我问是否有人帮助我找到错误 甚至改进

• 如何在运行时读取/写入 app.config 设置而不使用用户设置？

  我正在寻找一种存储应用程序或机器级别设置的方法 可以使用以下命令在运行时写入这些设置 应用程序设置 http msdn microsoft com en us library k4s6c3a0 aspx 用户设置允许读 写 但应用程序设置不

• 如何使用 .NET Core 2 中 Azure Key Vault 中存储的 PFX 证书中的私钥？

  我用 C 编写了一个 ASP NET Core 2 0 网站 并启用了 Facebook 身份验证 因此它需要 HTTPS 我使用本机 Kestrel Web 服务器来托管该网站 并设置一个侦听器来根据 MS 文档获取 PFX 证书 我似乎

• 在 React JS 中创建

元素