reactjs - 将多个输入 onChange react 为单个数组

Question

我有一个状态，它是组件 A 中的一个数组。然后我有一个组件 B(其 props 是组件 A 的状态)，其中根据 A 的状态生成许多输入(类型文本)。说 3 ，然后我有 3 个输入类型文本，它们被包装在不同的组件和 div 中。我想知道我是否可以通过 onChange 获取所有三个值并将其添加到组件 A 中的数组中？顺序并不重要。也许有类似获取此 div 容器的子级，然后将其所有值 onChange 映射到数组并设置状态之类的操作？类似这样的事情

编辑:

所以我写了这个，我可以看到名称是正确的，但我收到此错误:“警告:出于性能原因重用此合成事件。如果您看到此内容，则您正在访问已发布的属性目标.. . 巴拉巴拉”。为什么我感觉我的setState不纯粹。好的，我要休息了……

  onMultipleChange(e) {
        console.log(e.target.name);
        this.setState((prevState, props) => {
            let publicKeys = {...prevState.publicKeys, [e.target.name]: e.target.value};
            return {...prevState, publicKeys}
        }, console.log(this.state));
    }

像这样动态设置引用:

refSetter = (ix) => (ref) => { this._refs[ix] = ref; };

Answer 1

警告:这是一种非常幼稚的方法，显然感觉很老套，但仍然有效，而且是合法的。我确信有一种更好的方法，不依赖 refs。

示例:https://codesandbox.io/s/002o3275jl

组件A

class ComponentA extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      vals: []
    }
    this._refs = {};
  }

  onChange = () => {
    this.setState({
      vals: Object
        .keys(this._refs)
        .map(key => 
          this._refs[key] && 
          this._refs[key].value
        )
     });
  }

  render() {
    return (
      <div>
        All Vals: {this.state.vals.join(', ')}
        <ComponentB _ref={ref => this._refs['b'] = ref} onChange={this.onChange} />
        <ComponentC _ref={ref => this._refs['c'] = ref} onChange={this.onChange} />
        <ComponentD _ref={ref => this._refs['d'] = ref} onChange={this.onChange} />
      </div>
    )
  }
}

子组件

const ComponentB = ({_ref, onChange}) => (
  <input ref={_ref} onChange={onChange} type="text" />
);

const ComponentC = ({ _ref,  onChange }) => (
  <input ref={_ref} onChange={onChange} type="text" />
);

const ComponentD = ({ _ref,  onChange }) => (
  <input ref={_ref} onChange={onChange} type="text" />
);