如何將一些道具傳遞給 reactjs 中的其他組件？

Question

這應該接收一些用戶信息，我想將用戶輸入更新的一些狀態傳遞到另一個組件中的表中，但是，我在網上看到的方式似乎不起作用，它們是只是在表格中顯示空白而不是輸入值。

class StartPage extends Component {
          constructor(props) {
          super(props);
        
            this.state = {
              setBots: '',
              setEmployees: '',
              setSalary: '',
              setTime: '',
        
          };
        
            this.handleChange = this.handleChange.bind(this);
            this.onCalculateSubmit = 
           this.onCalculateSubmit.bind(this);
          };
          
            handleChange(event) {
              this.setState({
                [event.target.name]: event.target.value
              });
            };
        
            
            onCalculateSubmit(event) {
              alert(this.state.setSalary);
              this.setState({calcClicked: true});
            }
    
    render(){
        return (
          <div className="container">
            <div className="header-container">
              <h2>   </h2>
              <h1>Return on Investment Calculator</h1>
              <h2>   </h2>
            </div>
      
            <form onSubmit={this.onCalculateSubmit}>
            <div class="inputs input-group">
              {/* <InputCard onChange={this.handleBots} value= 
                {this.state.value} id="Bots" icon="robot" 
               label="Number of Processes" />
              <InputCard onChange={this.handleEmployees} value= 
                {this.state.setEmployees} type="text" id="Employees" 
                icon="users" 
               label="Number of FTE's" />
              <InputCard onChange={this.handleSalary} id="Salary" 
                icon="dollar-sign" label="Average Salary" />
              <InputCard onChange={this.handleTime} id="Time" 
               icon="clock" label="Average Time (%)" /> */}
              <label>
                Number of Processes: 
              <input type="text" onChange={this.handleChange} 
              name="setBots" /> {/*value={this.state.value}*/}
              </label>
            </div>
            <div class="inputs input-group">
              <label>
                Number of FTEs: 
              <input type="text" onChange={this.handleChange} 
               name="setEmployees" />
              </label>
            </div>
            <div class="inputs input-group">
              <label>
                Average Salary for FTEs: 
                <input type="text" onChange={this.handleChange} 
                name="setSalary" />
              </label>
            </div>
            <div class="inputs input-group">
              <label>
                Percent of Time Spent on Task: 
                <input type="text" onChange={this.handleChange} 
                 name="setTime" />
              </label>
            </div>
        <Router>
              <div>
                <h1>   </h1>
                <Link to='/ResultsPage' >
                 <button type="submit" onClick= 
                  {this.onCalculateSubmit}
                  class="btn btn-outline-success submit-button btn- 
                  lg">CALCULATE</button>
                </Link>
              </div>
              <Switch>
                <Route path="/ResultsPage" exact>
                  <ResultsPage data={this.state.setSalary} />
                </Route>  
              </Switch>  
            </Router>
            {/*<input type="submit" value="Submit"/>*/}
            </form>

這是另一個組件，應該使用表中的道具。 截至目前，它輸出空白：

const ResultsPage = (data) => {
  return (
    <>
        <Header />   
    <Table table-hover className="resultsTable">
    <thead>
        <tr>
            <th>   </th>
            <th>Year 1</th>
            <th>Year 2</th>
            <th>Year 3</th>
            <th>Year 4</th>
            <th>Year 5</th>
        </tr>
    </thead>
    <tbody>
            <tr>
            <b><td>Salary of Employee(s) Spent on Task</td></b>
            <td>{data.setSalary}</td>
            <td>{data.setSalary}</td>
            <td>{data.setSalary}</td>
            <td>{data.setSalary}</td>
            <td>{data.setSalary}</td>
        </tr>

Answer 1

我看到可能有 2 個問題。

第一個是你的表格。 我認為您也需要重新格式化您的父組件。 我不建議在整個路由器周圍使用表單，因為這意味着您擁有的每條路由都將成為可能導致問題的表單的一部分。 但是這個問題是您沒有阻止表單的默認操作，即 GET 請求。

onCalculateSubmit(event) {
    event.preventDefault();
    alert(this.state.setSalary);
    this.setState({calcClicked: true});
}

但主要的一個是在你的 ResultsPage 組件中。 當你將 props 傳遞給一個組件時，它們都被一起保存為一個對象。 因此，您要么需要將其解構為數據變量const { data } = props要么只需從對象props.data.setSalary調用 if

const ResultsPage = (props) => {

const { data } = props;
// or you could say props.data.setSalary

  return (
    <>
    <Header />   
    <Table table-hover className="resultsTable">
    <thead>
        <tr>
            <th>   </th>
            <th>Year 1</th>
            <th>Year 2</th>
            <th>Year 3</th>
            <th>Year 4</th>
            <th>Year 5</th>
        </tr>
    </thead>
    <tbody>
            <tr>
            <b><td>Salary of Employee(s) Spent on Task</td></b>
            <td>{data.setSalary}</td>
            <td>{data.setSalary}</td>
            <td>{data.setSalary}</td>
            <td>{data.setSalary}</td>
            <td>{data.setSalary}</td>
        </tr>
    </tbody>
</Table>