Question

我有InputArea

的组件state = {input: ''}

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

中

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

{$$ typeof：Symbol（react.element），输入：ƒ，key：“1”，ref：null，props： {...}，...}

在元素中它显示如下：

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

使用this.state.prefooterArea [0] .value给出undefined。

我也尝试将输入从组件传递到容器作为道具，但它说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

Figured it out. This caused problem.

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

I should have added that initial PrefooterAreaInput with lifecycle method instead. With that I was able to pass state just fine.

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>
        );
    }
}

从反应组件中获取价值

2 个答案: