Question

有人可以帮我解决这个难题吗？我有一个父App组件和两个子组件：Form和DataGrid（它们都是功能组件）。

用户在表单中输入数据，按“提交”按钮，他们的数据将添加到DataGrid中。数据作为状态存储在App组件中，并且提交处理程序在App组件中定义。当按钮位于App组件呈现方法的返回值（作为Form和DataGrid的对等方）时，一切正常。如果按钮位于Grid的返回值（新数据出现的位置），它也可以工作。但是，如果我将该按钮放在Form的返回值中，则会发生状态数据更改，但Grid组件不会重新呈现，因此不会显示新数据。

为什么按钮位于何处？正在更改的数据（即状态）和按钮单击的处理程序都是tiggering在App组件中。

App
  -Form
    -TextBox
    -RadioButtons
    [-Button (Grid won't re-render if the button is here in sibling of Grid)]

  -Grid
    -Title
    -Table
    [-Button (Grid DOES re-render if the button is here in the Grid)]
 [-Button (Grid also re-renders if the button is up here in the App)]

编辑：这是代码：

class App extends React.Component {
constructor(props) {
super(props);
this.state = {dataRows: [["John", "Ladd", "Science Lab", "a"],["Bill", "Smith", "Swimming", "bc"]],
              firstName: "", 
              lastName: "", 
              activity: "", 
              dietary: false,
              disability: false,
              medical: false
             }
this.submitData = this.submitData.bind(this)
}
submitData() {
var restrictions = "";
if (this.state.dietary) { restrictions += "a";}
if (this.state.disability) { restrictions += "b";}
if (this.state.medical) { restrictions += "c";}

var newRow = [this.state.firstName, this.state.lastName, this.state.activity, restrictions] 
var dataCopy = this.state.dataRows.slice()
dataCopy.push(newRow) 
this.setState({dataRows: dataCopy},
             function() {
              // blank out the form
              var startingState = {firstName: "", 
                              lastName: "", 
                              activity: "", 
                              dietary: false,
                              disability: false,
                              medical: false
                             };
              this.setState(startingState)
             }
)
}

render() {    
return <div>
      <RegistrationForm 
        dietary={this.state.dietary}
        disability={this.state.disability}
        medical={this.state.medical}
        firstName={this.state.firstName} 
        lastName={this.state.lastName} 
        activity= {this.state.activity} 
        handleChange={this.handleChange} 
        handleCheckBoxChange={this.handleCheckBoxChange}/>
      <Button label="Submit" submitData={this.submitData} handleChange={this.handleChange}/>
      <DataGrid rows={this.state.dataRows} removeRow={this.removeRow} />
    </div>
 }
}

function DataGrid(props) {
var rows = []
for(let i = 0; i < props.rows.length; i++){
    rows.push(<Row key={i} cellValues = {props.rows[i]} removeRow={() => props.removeRow(i) } />)
}
return (<div>              
    <HeaderRow columnLabels={["Remove", "First Name", "Last Name", "Activity", "Restrictions"]}/>
      {rows}
    </div>
)
}

function RegistrationForm(props) {
return <form>
      <TextBox label = "First Name:" name="firstName" value={props.firstName} handleChange={props.handleChange}/>
      <TextBox label = "Last Name:" name="lastName" value={props.lastName} handleChange={props.handleChange}/>
      <DropDown label="Select Activity:" name="activity" value={props.activity} 
        options={["Science Lab", "Swimming", "Cooking", "Painting"]} handleChange={props.handleChange}/>
      <CheckBoxSet label="Check all that apply:" name="restrictions" 
        restrictionCheckedStatus={[props.dietary, props.disability, props.medical]}
        options={["a) Dietary Restrictions", "b) Physical Disabilities", "c) Medical Needs"]}
        ids={["dietary", "disability", "medical"]}
        handleCheckBoxChange={props.handleCheckBoxChange}/>   
</form>  
}

function Button(props){
var style = { fontFamily: "Verdana",
             paddingLeft: "15px",
             paddingRight: "15px",
             textAlign: "center",
             borderColor: "gray"
           };
return <button onClick={() => props.submitData()}>     
  <p style={style}>{props.label}</p>
</button>
}

当更改按钮位于兄弟中时，React组件无法重新呈现

0 个答案: