React - 在两个现有组件之间渲染组件

Question

我对使用React很陌生，我试图构建的是一个动态表单，用户可以在其中添加/删除字段，在添加行（字段）后渲染时出现问题

这是我的行组件，我用它作为模板来填充道具

class Row extends React.Component {

    constructor(props){

        super(props);

        this.addLine = this.addLine.bind(this)

        this.handleTitleChange = this.handleTitleChange.bind(this)

        this.handleInquisitionChange = this.handleInquisitionChange.bind(this)

    }

state = {

    pos: this.props.pos,

    title: this.props.title,

    inquisition: this.props.inquisition

}

addLine() { 

    this.props.addLine(this.state.pos);

}

handleTitleChange = async (event) => {

    await this.setState({title: event.target.value});

    this.props.updateRowState(this.state.pos, this.state.title, "title")    

}

handleInquisitionChange = async (event) => {

    await this.setState({inquisition: event.target.value});

    this.props.updateRowState(this.state.pos, this.state.inquisition, "inquisition")    

}

render(){

  return(

    <div className="w3-row odg-line">

        <div className="w3-col m2" style={{paddingRight: "8px"}}>

            <input type="text" name="titolo[]" placeholder="Argomento" style={{width:"100%"}} onChange={this.handleTitleChange} required/>

        </div>

        <div className="w3-col m4" style={{paddingRight: "8px"}}>

            <textarea form="convocazione" name="istruttoria[]" placeholder="Istruttoria" style={{width:"100%"}} onChange={this.handleInquisitionChange} required></textarea>

        </div>

        <div className="w3-col m1">

            <button type="button" style={{padding:0, height: "24px", width: "24px"}} className="w3-red w3-button w3-hover-white" onClick={() => this.addLine()}>+</button>

        </div>

    </div>

  )

}

}

这是它的父 Convoca，正如你所看到的，每当按下“加号”按钮时，它就会在它之后推动一行并更新组件状态，据我所知，这应该会导致组件再次呈现，但是当它来临时，它只是在已经渲染的按钮之后添加新的addLine

class Convoca extends React.Component {

    constructor(props) {

        super(props)

        this.handleSubmit = this.handleSubmit.bind(this);

        this.addLine = this.addLine.bind(this);

    }

Answer 1

我会以另一种方式实现功能addLine请看一下代码段。const createElement = React.createElement;class Row extends React.Component {&nbsp; render() {&nbsp; &nbsp; const {&nbsp; &nbsp; &nbsp; position&nbsp; &nbsp; } = this.props;&nbsp; &nbsp; return createElement('div', null, [&nbsp; &nbsp; &nbsp; createElement('input', {&nbsp; &nbsp; &nbsp; &nbsp; type: "text",&nbsp; &nbsp; &nbsp; &nbsp; value: this.props.title&nbsp; &nbsp; &nbsp; }),&nbsp; &nbsp; &nbsp; createElement('button', {&nbsp; &nbsp; &nbsp; &nbsp; type: "button",&nbsp; &nbsp; &nbsp; &nbsp; onClick: () => this.props.onAdd(position)&nbsp; &nbsp; &nbsp; }, '+')&nbsp; &nbsp; ]);&nbsp; }}class App extends React.Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; rows: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: 'id 0 position 0'&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: 'id 1 position 1'&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; };&nbsp; &nbsp; this.addLine = this.addLine.bind(this);&nbsp; }&nbsp; addLine(position) {&nbsp; &nbsp; const {&nbsp; &nbsp; &nbsp; rows&nbsp; &nbsp; } = this.state&nbsp; &nbsp; const newId = rows.reduce((acc, row) => acc > row.id ? acc : row.id, 0) + 1&nbsp; &nbsp; position = position + 1;&nbsp; &nbsp; const newRows = [&nbsp; &nbsp; &nbsp; ...rows.filter(row => row.position < position),&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: newId,&nbsp; &nbsp; &nbsp; &nbsp; position,&nbsp; &nbsp; &nbsp; &nbsp; title: `id ${newId} position ${position}`&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; ...rows.filter(row => row.position >= position).map(row => ({ ...row,&nbsp; &nbsp; &nbsp; &nbsp; position: row.position + 1,&nbsp; &nbsp; &nbsp; &nbsp; title: `id ${row.id} position ${row.position + 1}`&nbsp; &nbsp; &nbsp; }))&nbsp; &nbsp; ]&nbsp; &nbsp; newRows.sort((prev, next) => prev.position - next.position)&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; rows: newRows&nbsp; &nbsp; })&nbsp; }&nbsp; render() {&nbsp; &nbsp; const items = this.state.rows.map(item =>&nbsp; &nbsp; &nbsp; createElement(Row, {&nbsp; &nbsp; &nbsp; &nbsp; key: item.id,&nbsp; &nbsp; &nbsp; &nbsp; title: item.title,&nbsp; &nbsp; &nbsp; &nbsp; position: item.position,&nbsp; &nbsp; &nbsp; &nbsp; onAdd: this.addLine&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; )&nbsp; &nbsp; return createElement('form', null, items);&nbsp; }}var rootElement = createElement(App, {}, )ReactDOM.render(rootElement, document.getElementById('root'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><div id="root"></div>我会以另一种方式实现功能addLine请看一下代码段。const createElement = React.createElement;class Row extends React.Component {&nbsp; render() {&nbsp; &nbsp; const {&nbsp; &nbsp; &nbsp; position&nbsp; &nbsp; } = this.props;&nbsp; &nbsp; return createElement('div', null, [&nbsp; &nbsp; &nbsp; createElement('input', {&nbsp; &nbsp; &nbsp; &nbsp; type: "text",&nbsp; &nbsp; &nbsp; &nbsp; value: this.props.title&nbsp; &nbsp; &nbsp; }),&nbsp; &nbsp; &nbsp; createElement('button', {&nbsp; &nbsp; &nbsp; &nbsp; type: "button",&nbsp; &nbsp; &nbsp; &nbsp; onClick: () => this.props.onAdd(position)&nbsp; &nbsp; &nbsp; }, '+')&nbsp; &nbsp; ]);&nbsp; }}class App extends React.Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; rows: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: 'id 0 position 0'&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: 'id 1 position 1'&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; };&nbsp; &nbsp; this.addLine = this.addLine.bind(this);&nbsp; }&nbsp; addLine(position) {&nbsp; &nbsp; const {&nbsp; &nbsp; &nbsp; rows&nbsp; &nbsp; } = this.state&nbsp; &nbsp; const newId = rows.reduce((acc, row) => acc > row.id ? acc : row.id, 0) + 1&nbsp; &nbsp; position = position + 1;&nbsp; &nbsp; const newRows = [&nbsp; &nbsp; &nbsp; ...rows.filter(row => row.position < position),&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: newId,&nbsp; &nbsp; &nbsp; &nbsp; position,&nbsp; &nbsp; &nbsp; &nbsp; title: `id ${newId} position ${position}`&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; ...rows.filter(row => row.position >= position).map(row => ({ ...row,&nbsp; &nbsp; &nbsp; &nbsp; position: row.position + 1,&nbsp; &nbsp; &nbsp; &nbsp; title: `id ${row.id} position ${row.position + 1}`&nbsp; &nbsp; &nbsp; }))&nbsp; &nbsp; ]&nbsp; &nbsp; newRows.sort((prev, next) => prev.position - next.position)&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; rows: newRows&nbsp; &nbsp; })&nbsp; }&nbsp; render() {&nbsp; &nbsp; const items = this.state.rows.map(item =>&nbsp; &nbsp; &nbsp; createElement(Row, {&nbsp; &nbsp; &nbsp; &nbsp; key: item.id,&nbsp; &nbsp; &nbsp; &nbsp; title: item.title,&nbsp; &nbsp; &nbsp; &nbsp; position: item.position,&nbsp; &nbsp; &nbsp; &nbsp; onAdd: this.addLine&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; )&nbsp; &nbsp; return createElement('form', null, items);&nbsp; }}var rootElement = createElement(App, {}, )ReactDOM.render(rootElement, document.getElementById('root'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><div id="root"></div>