Javascript 从react组件获取值

我有一个状态为{input:}的组件InputArea

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

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

{$$typeof:Symbolreact.element，type:ƒ，key:1，ref:null，props: {…}，…}

在元素中，它显示如下：

使用此.state.prefooterea[0]。值将给出未定义的

我还尝试将输入作为道具从组件传递到容器，但它说getInput不是一个函数。据我所知，这与我在容器中使用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>
    );
  }
}

---

你是不是想达到这样的目标

子组件：

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

---

我明白了。这就造成了问题

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

---

我应该用lifecycle方法添加最初的PrefooterAreaInput。有了这些，我就可以顺利通过州议会了

你能详细解释一下你想完成什么吗？提供更多信息我正在尝试获取容器中的输入值。容器状态下有一个组件列表，每个组件以自己的状态存储输入。但为什么要引用整个元素，为什么不只存储输入值？@MarioNikolaus true。钥匙是道具吗？然后，只有您可以将其作为属性添加到自定义组件上。因为PrefooterAreaInput在JSX.HTMLElement类别中不是内置组件。不需要将输入中的attr值赋给this.state.input.Yes，类似的内容。我将编辑我的帖子以包含更多代码。完成。整个文件太大了，所以我不得不裁剪相关代码。你能解释一下你的输入是什么吗？当单击AddFooterInpAuthHandler时，会显示输入值等预期输出，在移除FooterInpAuthHandler后会被删除？我可以看到，您在DescriptionFrame中将PrefooterAreaInput组件设置为状态，不建议将组件设置为状态如果您希望将输入值从子组件传递到父组件，请在子组件中尝试以下操作：this.props.onChangeevent.target.value}{…otherProps}/>我的输入是我键入的任何内容。正如我所说的，我尝试将child的输入作为道具传递，但它说这不是一个函数