Question

我想在附加点击添加新按钮后附加受访者名称文本框，我已经尝试但是也附加了按钮，我的需要只是应该复制受访者姓名文本框。就像点击按钮一样，它应该看起来像 ..................................... .................................................. ..................

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-alpha1/JSXTransformer.js"></script>    
    <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>    
    <style>
        table,th,td
        {
            border: 1px solid #000;
        }
        th,td
        {
            width:220px;
        }
        table
        {
            border-collapse: collapse;
            margin: auto;           
        }
        .error
        {
            color: red;
        }   
    </style>
  </head>
  <body>
    <div id="InterviewerSection"></div>
    <div id="candidateSection"></div>
    <div id="buttonSection"></div>

    <script type="text/jsx">  
        var count=0;
        class Interviewer extends React.Component{
            render(){
                return(
                    <div>
                        <table>
                            <tr>
                                <th colSpan="2">Interviewer details</th>
                            </tr>
                            <tr>
                                <th>Name</th> <td><input type="text" placeholder="Interviewer name" /></td>
                            </tr>   
                        </table>
                    </div>              
                )           
            }

        }
        class Buttons extends React.Component{
            render(){
                return(
                    <table>
                        <tr>
                            <td><button onClick={this.props.validate} ref="input">Add new</button></td>
                            <td><button>Save</button></td>                          
                        </tr>   
                    </table>
                )
            }

        }
        class Interviewee extends React.Component {             
            constructor(props) {
                super(props);
                this.state = {
                    showComponent: false,                    
                };               
            }
            addNew(){
                this.setState({
                    showComponent: true
                });
            }
            validate(){
                this.setState({
                    showComponent: true
                });
            }
            render(){
                return(
                    <div>
                        <table>

                            <tr>
                                <th colSpan="2">Interviewee details</th>
                            </tr>
                            <tr>
                                <th>Name</th>
                                <td><input type="text" placeholder="Interviewee name" /></td>                               
                            </tr>                           
                        </table>
                        {this.state.showComponent?<MyComponent />:null}     
                    </div>

                );

            }

        }    
        ReactDOM.render(<Interviewer />,document.getElementById("InterviewerSection"));
        ReactDOM.render(<Interviewee />,document.getElementById("candidateSection"));
        ReactDOM.render(<Buttons />,document.getElementById("buttonSection"))   
</script>
  </body>
</html>

Answer 1

通过你的代码，我认为你误解了使用Reactjs并以类似jQuery的方式使用它的原因。使用React，我们应该使用层次结构和可组合结构中的组件。例如，在您的应用程序中，我们可以拥有一个包含其他组件的根组件：Interviewer，Interviewee，AddButton，SaveButton等。类似于此内容：< / p>

<App>
    <Interviewer interviewer />
    <Interviewees intervieweeList />
    <ButtonPanel onAddNew onSave />
</App>

根组件（App）的状态为集中式数据存储，为其他组件提供必要的数据（intervieweeList等Interviewees），以及将app方法传递给{{ 1}}。在上面的示例中，ButtonPanel可以通过向onAddNew添加新条目来操纵App状态，然后触发intervieweeList组件重新呈现。通过这样做，您只需要安装（ReactDOM.render）App组件，它将负责其余部分。

与jQuery相比，实现app逻辑是一种完全不同的方式，所以我的建议是首先尝试围绕React如何工作并从那里开始。

Answer 2

我假设Interviewee组件是您的主要组件。因此，剩余的组件将被放置在受访者组件内。

最好为应用程序维护一个根。

根据您的要求，我创建了类似下面的内容，希望这会对您有所帮助..

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-alpha1/JSXTransformer.js"></script>    
    <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>    
    <style>
        table,th,td
        {
            border: 1px solid #000;
        }
        th,td
        {
            width:220px;
        }
        table
        {
            border-collapse: collapse;
            margin: auto;           
        }
        .error
        {
            color: red;
        }   
    </style>
  </head>
  <body>
    <div id="app"></div>

    <script type="text/jsx">  
        var count=0;

        class Interviewer extends React.Component{
            render(){
                return(
                    <div>
                        <table>
                            <thead>
                                <tr>
                                    <th colSpan="2">Interviewer details</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>Name</th>
                                    <td><input type="text" placeholder="Interviewer name" /></td>
                                </tr>
                            </tbody>  
                        </table>
                    </div>              
                )           
            }
        }

        class Buttons extends React.Component{
            render(){
                return(
                <div>
                    <table>
                        <tbody>
                            <tr>
                                <td><button onClick={this.props.validate} ref="input">Add new</button></td>
                                <td><button>Save</button></td>                          
                            </tr>   
                        </tbody>
                    </table>
                </div>
                )
            }
        }

        class Interviewee extends React.Component {             
            constructor(props) {
                super(props);
                this.state = {
                    showComponent: false, 
                    itemArray: []                   
                };               
            }

            addNew(){
                this.validate()
            }

            validate(){
                const item = this.state.itemArray;
                item.push(
                   <IntervieweeDetail />   
                )
                this.setState({itemArray: item, showComponent: true})
            }
            render(){
                return(
                    <div>
                        <Interviewer />
                        <table>
                            <tbody>
                                <tr>
                                    <th colSpan="2">Interviewee details</th>
                                </tr>
                                <IntervieweeDetail /> 
                                {this.state.showComponent ? this.state.itemArray : null}     
                            </tbody>
                        </table>
                        <Buttons validate={this.validate.bind(this)}/> 
                    </div>

                );
            }
        } 

        const IntervieweeDetail = (props) => (
            <tr>
                <th>Name</th>
                <td><input type="text" placeholder="Interviewee name" /></td>                               
            </tr> 
        )

        ReactDOM.render(<Interviewee />, document.getElementById("app"));
</script>
  </body>
</html>

Answer 3

正如@ dat-pham指出的那样，你需要学习＆＃34; React＆＃34;思维方式。

您需要有一个根节点，按惯例命名为<App />。所有其他组件都嵌套在里面。

使用嵌套的子组件组合组件。在您的情况下，<Table>位于<App>内。 <Table>包含子<Interviewer/>等。

希望以下代码有用......

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Hello React!</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-alpha1/JSXTransformer.js"></script>
  <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
  <style>
    table,th,td {
      border: 1px solid #000;
    }
    th,td {
      width:220px;
    }
    table {
      border-collapse: collapse;
      margin: auto;
    }
    .error {
      color: red;
    }
  </style>
</head>
<body>
  <div id="root"></div>

  <script type="text/jsx">
    class App extends React.Component {
      render(){
        return (
          <Table />
        );
      }
    }

    class Table extends React.Component {

      constructor(props) {
        super(props);
        this.state = {count: 1};
        this.addInterviewee = this.addInterviewee.bind(this);
      }

      getInterviewees(){
        var interviewees = [];
        for (let i=0; i<this.state.count; i++){
          interviewees.push(<Interviewee key={i}/>)
        }
        return interviewees;
      }

      addInterviewee() {
        var oldCount = this.state.count;
        this.setState({count: oldCount+1});
      }

      render() {
        return (
          <table>
            <thead>
              <tr>
                <th colSpan="2">Interviewer details</th>
              </tr>
            </thead>
            <tbody>
              <Interviewer />
              <tr>
                <td colSpan="2" style={{"textAlign": "center"}}><b>Interviewee details</b></td>
              </tr>
              {this.getInterviewees()}
              <Buttons addInterviewee={this.addInterviewee} />
            </tbody>
          </table>
        );
      }
    }

    class Interviewer extends React.Component{
      render(){
        return(
          <tr>
            <td> <b>Name</b> </td>
            <td> <input type="text" placeholder="Interviewer name" /> </td>
          </tr>
        )
      }
    }

    class Interviewee extends React.Component {
      render(){
        return(
          <tr>
            <td><b>Name</b></td>
            <td><input type="text" placeholder="Interviewee name" /></td>
          </tr>
        );
      }
    }

    class Buttons extends React.Component{
      render(){
        return(
          <tr>
            <td><button onClick={this.props.addInterviewee}>Add new</button></td>
            <td><button>Save</button></td>
          </tr>
        )
      }

    }

    ReactDOM.render(<App />,document.getElementById("root"));
  </script>
</body>
</html>

如何在reactjs中附加组件

3 个答案: