从反应组件中获取价值

Question

我有一个组件 InputArea 和 state = {input: ''}

然后我将其中几个组件映射到一个容器中，并将它们写入state = {inputAreas: []}

现在，如何在容器中获取输入？记录 this.state.inputAreas[0] 会返回如下对象：

{$$typeof: Symbol(react.element), type: ƒ, key: "1", ref: null, props: {…}, …}

在元素中显示如下：

<input type="text" class="form-control" name="input" value="abc">

使用 this.state.prefooterArea[0].value 给出未定义。

我也尝试将输入从组件传递到容器作为道具，但它显示getInput is not a function。据我了解，这与我在容器中使用 map 的事实有关。我不能在这个项目中使用 redux。

组件代码

class PrefooterAreaInput extends Component {
  state = {
    input: ''
  }

  textChangedHandler = (event) => {
    let newState = {};
    newState[event.target.name] = event.target.value;
    this.setState(newState);
  }

  render() {
    return (
      <div>
        <input
          className="form-control"
          type="text"
          name="input"
          value = {this.state.input}
          onChange={this.textChangedHandler}
        />
      </div>
    )
  }
}

容器代码

class DescriptionFrame extends Component {
  state = {,
    prefooterArea: [<PrefooterAreaInput key={1}/>]
  };

  addFooterInputHandler = event => {
    event.preventDefault();
    if (this.state.prefooterArea.length < prefooterInputFieldsMax) {
      var newPrefooterArea = this.state.prefooterArea.map(
        inputField => inputField
      );
      newPrefooterArea.push(
        <PrefooterAreaInput key={this.state.prefooterArea.length + 1} />
      );
      this.setState({ prefooterArea: newPrefooterArea });
    }
  };

  removeFooterInputHandler = event => {
    event.preventDefault();
    if (this.state.prefooterArea.length > 1) {
      var newPrefooterArea = this.state.prefooterArea.map(
        inputField => inputField
      );
      newPrefooterArea.splice(newPrefooterArea.length - 1);
      this.setState({ prefooterArea: newPrefooterArea });
    }
  render() {
    // want to get this.state.prefooterArea[0]'s value 
    return (
      <div>
        {this.state.prefooterArea}
          <a
            className="nav-link"
            href=""
            onClick={this.addFooterInputHandler}
          >
            Add More
          </a>
          <a
            className="nav-link"
            href=""
            onClick={this.removeFooterInputHandler}
          >
            Remove Last
          </a>
      </div>
    );
  }
}

Answer 1

想通了。这导致了问题。

prefooterArea: [<PrefooterAreaInput key={1}/>]

我应该使用生命周期方法添加初始 PrefooterAreaInput。有了这个，我就能很好地通过状态。

Answer 2

您是否正在尝试实现这样的目标？

子组件：

export default class InputBox extends React.Component {
render() {
    return (
            <input onChange={event => this.props.onChange(event.target.value)} />

    );
}} 

父组件：

   import InputBox from './InputBox';

    class FilterBar extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                inputs: "" //get input value from state this  input
            };
           this.updateFilters = this.updateFilters.bind(this);
        }

       updateFilters(i) {
           this.setState({ inputs: i }); // this will print whatever input you type
       }

        render() {
           return (
             <div>
                 <InputBox onChange={(i) => this.updateFilters(i)} />
             </div>
        );
    }
}