React JS在文本字段中显示参与者所选ID的所有数据

React JS display all data in the textfield for particuler selected ID

本文关键字：ID 数据 参与者 显示 JS 文本 字段 React      更新时间：2023-09-26

以下是react呈现，当我获得单个输入标记并发生错误时，它成功工作（错误：解析错误：第59行：相邻的JSX元素必须封装在一个封闭标记中在http://localhost/PHP-React-Demo/update_record.html

* @param {object?} options Options to pass to jstransform) when render multiple input text fields.
render : function(){ 
    var currentId = this.state.currentId;
    var phpData = this.state.phpData || [];
    var selected = phpData.filter(function (item) {
        return item.id === currentId;
    });  
    DBdata = this.state.phpData || [];
    return (
        <div>
        <form >
        Select ID :
            <select onChange={this.handleChange}>
            {DBdata.map(function(d){
                return(
                    <option name="id" value={d.id}>{d.id}</option>
                );
            })};
            </select>
            <button name="submit" value="submit">update</button><br/>
            {selected.map(function(datafield){
                return(
                    // <input type="text" value={datafield.name} />//if I remove this comment it shows the above error
                    <input type="text" value={datafield.email} />                            
                );
            })}
        </form>
        </div>
    )}
});
React.render(
    <DataInTableFormat source="http://localhost/PHP-React-Demo/index.php" />, document.getElementById('Table-data')
);

**问题是你不能打开标签，你必须将它们包装成

//wrong
<input />
<input />

//right
<div>
 <input />
 <input />
</div>

**

* @param {object?} options Options to pass to jstransform) when render multiple input text fields.
render : function(){ 
    var currentId = this.state.currentId;
    var phpData = this.state.phpData || [];
    var selected = phpData.filter(function (item) {
        return item.id === currentId;
    });  
    DBdata = this.state.phpData || [];
    return (
        <div>
        <form >
        Select ID :
            <select onChange={this.handleChange}>
            {DBdata.map(function(d){
                return(
                    <option name="id" value={d.id}>{d.id}</option>
                );
            })};
            </select>
            <button name="submit" value="submit">update</button><br/>
            {selected.map(function(datafield){
                return(
                    <div>
                      <input type="text" value={datafield.name} />
                      <input type="text" value={datafield.email} />
                    </div>                         
                );
            })}
        </form>
        </div>
    )}
});
React.render(
    <DataInTableFormat source="http://localhost/PHP-React-Demo/index.php" />, document.getElementById('Table-data')
);

返回的代码（）应该包装在一个单独的标签中

return(
    <div>
         <input type="text" value={datafield.name} />
         <input type="text" value={datafield.email} /> 
    </div>
)

您必须将这两个输入元素包装在一个标记中。。。

相关文章：