Javascript 如何通过子组件'；s输入字段

我正在尝试更新父组件状态中的数组。每个子组件都是通过父组件的状态数组中的元素创建的。现在，我在父组件中有一个onChange处理程序，我将它传递给子组件

以下是一些与此相关的代码片段：

母公司

class PropertyBar extends Component {
  state = {
    selectedCell: graph.selectedCell,
    cellProperties: []
  }

  onChangeHandler(e) {
    let cellProperties = [...this.state.cellProperties];
    cellProperties[e.target.name] = e.target.value;
    this.setState({cellProperties});
  }

  renderPropertyList() {
    return this.state.cellProperties.map(key => {
      return <PropertyBarItem name={key.nodeName} value={key.nodeValue} onChange={this.onChangeHandler}/>
    })
  }
}

类PropertyBar扩展组件{
状态={
selectedCell:graph.selectedCell，
cellProperties:[]
}
onChangeHandler（e）{
让cellProperties=[…this.state.cellProperties]；
cellProperties[e.target.name]=e.target.value；
this.setState（{cellProperties}）；
}
renderPropertyList（）{
返回此.state.cellProperties.map（键=>{
返回
})
}
}

孩子

类PropertyBarItem扩展组件{
建造师（道具）{
超级（道具）；
}
onChangeHandler（e）{
if（this.props.onChangeHandler）{
this.props.onChangeHandler（e）；
}
}
render（）{
返回(
{this.onChangeHandler（e）}
/>
)
}
}

---

我认为我没有正确处理子组件中传递的

onChangeHandler

，但我可能也有错误的逻辑。

在父组件中，只需将onChange替换为clicked={（e）=>{this.onChangeHandler（e）}，而在您的chlild组件中，我们将onChange={this.props.clicked}

在父组件中

onChangeHandler =(e)=> {
let cellProperties = [...this.state.cellProperties];
cellProperties[e.target.name] = e.target.value;
this.setState({cellProperties});}

---

在子组件中，您没有正确使用

onChangeHandler

函数，因为您将它作为

onChange

的道具传递，因此它应该与下面的代码类似

class PropertyBarItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
          input: props.value
        }
    }

    onChange = (event) =>{
        this.setState({ input: event.target.value },()=>{ // callback of setState
            this.props.onChange(this.state.input) // passing the state to parent component
        })
    }

  render() {
    return (
      <ListItem divider={true} className="property-bar-item">
        <TextField
          id="property"
          label={this.props.name}
          value={this.state.input}
          margin="dense"
          onChange={this.onChange}
        />
      </ListItem>
    )
  }
}

---

在父级中，当您传入处理程序时，您将其作为“onChange”onChange={this.onChangeHandler}的道具传入。如果尝试onChangeHandler={this.onChangeHandler}，会发生什么@Crawdingle是一个很好的捕获，所以现在它在我开始在文本字段中键入后崩溃，并给我错误“无法读取未定义的属性”cellProperties“。不是为了发散，而是

onChange

在react中是一个保留字吗？好的，它现在可以工作了。输入字段不显示正在按下的键，但它显示在我的控制台中e log。此外，它只记录每个按下的键，而不是所有键的串联。当尝试键入一个已经有值的字段时，它也只在字符串的末尾添加一个键，并且控制台记录该值。别担心！我让它工作了。错的是，我试图使用

字符串访问
cellProperties
>键入而不是
int
。由于我已将
NamedNodeMap
转换为
数组
，我忘记了必须使用元素号而不是键来访问它。我所做的是将计数器传递给
.map
函数，然后将其分配给
id
属性
id={this.props.id.toString（）}
并使用它访问数组中的正确元素，如
cellProperties[parseInt（e.target.id）]=e.target.value；
。您仍然帮助我解决了最初的问题，即将我的
onChangeHandler
正确映射到我的子组件，谢谢您！
class PropertyBarItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
          input: props.value
        }
    }

    onChange = (event) =>{
        this.setState({ input: event.target.value },()=>{ // callback of setState
            this.props.onChange(this.state.input) // passing the state to parent component
        })
    }

  render() {
    return (
      <ListItem divider={true} className="property-bar-item">
        <TextField
          id="property"
          label={this.props.name}
          value={this.state.input}
          margin="dense"
          onChange={this.onChange}
        />
      </ListItem>
    )
  }
}

  onChangeHandler = (e) => { // arrow function
     console.log(e.target.value) // check
     //let cellProperties = [...this.state.cellProperties];
     //cellProperties[e.target.name] = e.target.value;
     //this.setState({cellProperties});
  }