Question

以下是当我获得单个输入标记并且发生错误时反应渲染它成功运行（错误：解析错误：第59行：相邻的JSX元素必须包装在一个封闭的标记中在Application.Suspending

* @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')
);

Answer 1

**问题是你不能把标签打开，你必须把它们包起来

//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')
);

Answer 2

return（）中的代码应包含在单个标记中

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

你必须将这两个输入元素包装在一个标签中......

React JS显示文本字段中的所有数据，以获取特定的选定ID

2 个答案: