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中的任何内容时，我希望第二个过滤器中的make DropDownList为空。当我只改变Main中的值时，它仍会在那里留下键入的文本。也许我做错了什么并且不了解基本的等级？

Answer 1

当DropDownList调用的回调更新了父级Main的状态时，应该将props传递给子组件SearchField。您的示例中的代码不一致，因此我无法猜测我需要更改哪些内容来帮助您，但这是一个非常基本的示例，说明如何通过回调事件处理程序将父状态设置传递给一个子项（text input）可用于在第二个子节点（文本区域）上设置道具：

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;

如何在ReactJS中使两个表单过滤器之间的依赖关系

1 个答案: