如何使ReactJS中的兩個窗體過濾器之間的依賴關係

Question

我的ReactJS應用程序中有三個類。在這裏，他們是：

class FirstFilter extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     val1: '' 
    }; 
    this.handleChange = this.handleChange.bind(this); 
    } 

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

    render() { 
    return (
     <Label> 
      <Input type="select" value={this.state.value} onChange={this.props.handleChange}> 
      <option disabled selected value>Select plox</option> 
       <option value='Firdt'>First</option> 
       <option value='Second'>Second</option> 
      </Input> 
     </Label> 
    ); 
    } 
} 

class SecondFilter extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     val2: '' 
    }; 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(event) { 
    this.setState({value: event.target.val2}); 
    } 

    render() { 
    return (
     <Label> 
      <Input type="search" placeholder="Print somthing" value={this.state.value} onChange={this.props.handleChange}> 
      </Input> 
     </Label> 
    ); 
    } 
} 

class Main extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     val1: '', 
     val2: '' 
    }; 

    this.handleChangeVal1 = this.handleChangeVal1.bind(this); 
    this.handleChangeVal2 = this.handleChangeVal2.bind(this); 
    } 
    handleChangeUUID(event) { 
    this.setState({val1: event.target.value.toLowerCase()}); 
    } 
    handleChangeOrigin(event) { 
    this.setState({val2: event.target.value.toLowerCase()}); 
    } 

    render() { 
    return (
     <div> 
     <Form inline> 
      <FormGroup> 
      <div> 
       <UuidRow handleChange = {this.handleChangeVal1} /> 
      </div> 
      <div> 
       <OriginRow handleChange = {this.handleChangeVal2} /> 
      </div> 
      </FormGroup> 
     </Form> 
     </div> 
    ); 
    } 
} 

我想從第二濾波器空使SearchField當我檢查什麼，我DropDownList從第一過濾器。當我只更改我的Main中的值時，仍然在那裏輸入文字。也許我做錯了什麼，不瞭解基本層次？

Answer 1

當通過DropDownList調用的回調已更新父級Main的狀態時，您應將道具傳遞給您的子級組件SearchField。在你的例子中的代碼是不一致的，所以我不能猜測我需要改變以幫助你，但這裏是一個非常基本的例子，說明如何通過回調事件處理程序將父母的狀態傳遞給一個孩子（文本輸入）可被用於設置（文本區域）上的第二個孩子道具：

https://codesandbox.io/s/BLwl1y6j2

main.js

import React, { Component } from 'react'; 
import { render } from 'react-dom'; 


import FirstChild from './FirstChild'; 
import SecondChild from './SecondChild'; 

class Main extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      val1: '', 
     }; 
    } 
    // callback to pass as prop to child element text input 
    handleChangeVal1 = (event) => { 
     // sets parent state 
     this.setState({val1: event.target.value.toLowerCase()}); 
    } 

    render() { 
     return (
      <div> 
       <FirstChild handleChange = { this.handleChangeVal1 } value={ this.state.val1 }/> 
       <SecondChild value={ this.state.val1 }/> 
      </div> 
     ); 
    } 
} 


render(<Main />, document.getElementById('root')); 

FirstChild.js

import React, {Component } from 'react'; 

class FirstChild extends Component { 
    // input calls handleChange callback passed in props to modify parent component state 
    render() { 
     console.log(this.props.value); 
     return (
      <input type="text" value={this.props.value} onChange={this.props.handleChange}/> 
     ); 
    } 
} 

export default FirstChild; 

SecondChild.js

import React, { Component } from 'react'; 

class SecondChild extends Component { 
    // render text area with value passed in props 
    render() { 
     console.log(this.props.value); 
     return (
      <textarea value={this.props.value} onChange={this.props.handleChange}/> 
     ); 
    } 
} 

export default SecondChild;