Question

我已经构建了一个输入字段组件，需要从父组件访问它的值。我试过像document.getelementById（id）.value这样的东西，但是它会返回null作为值。

父组件：

import StateBox from './StateBox.js';
import React, { Component } from 'react';

export default class AdressenListe extends Component {
render() {
    let filteredAdressen = this.props.adressen.filter(
        (asingle) => {
            return asingle.Firma.toLowerCase().indexOf(document.getElementById('Firma').value.toLowerCase()) !== -1;
        }
    );

    var anzahl = filteredAdressen.length;

    return (
        <div>
            <StateBox id="Firma" />
            <StateBox id="PLZ" />
            <li>
            </li>
        </div>
    );
}
}

输入字段组件：

import React, {Component} from 'react';

export default class StateBox extends Component {

//constructor input field
constructor() {
    super();
    //equal to object
    this.state = {
        search: ''
    };
}
updateSearch(event) {
    console.log(event.target.value);
    this.setState({search: event.target.value});
}

render(){
    return(
        <form className="StateBox">
            <input type="text" value={this.state.search} onChange={this.updateSearch.bind(this)}/>
        </form>
    );
}
}

Answer 1

您可以在父组件中声明状态并传递函数以更新子组件

中的状态

class Parent extends Component {
  this.state = {
    value: ''
  }
  changeValue = (value) => {
    this.setState({value});
  }

  render() {
    return <Child inputValue={this.state.value} changeValue={this.state.changeValue} />
  }

}

class Child extends Component {
  render() {
    <input value={this.props.inputValue} onChange={(e) => this.props.changeValue(e.target.value)} />
  }
}

Answer 2

如果要访问子组件的值，则需要lift the state up并控制子组件，因为这是您应该编写代码的方式。

以您的代码为基础：

class AdressenListe extends Component {
  constructor() {
    super();
    this.state = {
      Firma: ''
    };
  }

  changeValue (Firma) {
    this.setState({Firma});
  }

  render() {
    let filteredAdressen = this.props.adressen.filter(
      (asingle) => {
        return asingle.Firma.toLowerCase().indexOf(this.state.Firma.toLowerCase()) !== -1;
      }
    );

    return (
      <div>
        <StateBox inputValue={this.state.Firma} changeValue={this.changeValue.bind(this)} />
      </div>
    );
  }
}

请注意我如何传递必要的道具，状态由父母管理。

class StateBox extends Component {
  render () {
    return <input type="text" value={this.props.inputValue} onChange={(e) => this.props.changeValue(e.target.value)} />
  }
}

react：输入组件的访问值

2 个答案: