Javascript 使用Props数组对不同形式的输入进行响应

试图找出如何动态处理表单中不同数量的道具数据。我的谷歌搜索结果一无所获。我正在根据相关用户拥有的狗的数量收集约会数量的数据。所以道具看起来像这样：

this.props: {
  user: {
    id: 11
    name: "Steve",
    age: 32
  }
  dogs: [{
    id: 18,
    name: "Rover"
  },{
    id: 42,
    name: "Snugglemittens"
  }]
}

render(){
    <form onSubmit={this._handleSubmit.bind(this)}>
      {this.props.dogs.map((dogge)=>{
        return(<MsgView dog={dogge} key={dogge.id} />;)
      }}
      <button type="submit">Submit</button>
    </form>
}

每个用户都有不同数量的狗。我的父元素视图如下所示：

this.props: {
  user: {
    id: 11
    name: "Steve",
    age: 32
  }
  dogs: [{
    id: 18,
    name: "Rover"
  },{
    id: 42,
    name: "Snugglemittens"
  }]
}

render(){
    <form onSubmit={this._handleSubmit.bind(this)}>
      {this.props.dogs.map((dogge)=>{
        return(<MsgView dog={dogge} key={dogge.id} />;)
      }}
      <button type="submit">Submit</button>
    </form>
}

render（）{
{this.props.dogs.map（（dogge）=>{
返回（；）
}}
提交
}

然后在每个消息视图中，我想收集关于每只狗的两个复选框：

render(){
  <div className="form-group" data-toggle="buttons">
    <label><input type="checkbox" autoComplete="off"/> XYZ </label>
  </div>
  <div className="form-group" data-toggle="buttons">
    <label><input type="checkbox" autoComplete="off"/> ABC </label>
  </div>
}

render（）{
XYZ
基础知识
}

---

我不确定如何使用ajax将填写的数据返回到后端。我最初的想法是使用状态来收集信息并一次将其发送回。我非常确定React可以通过我可以使用的道具传递函数，但我找不到一个好的示例。

我认为这是可行的。您可以填充

This.state当视图加载时

// or in a lifecycle method componentWillMount or componentDidMount instead
// and do in constructor, this.state = { dogs: [] }
// sorry, this is kind of hard to do abstractly

constructor(props) {
  super(props)
  // on pageload, set initial state to the doggo array
  this.state = {
    dogs: this.props.dogs
  }
}

// alternate solution potential:
componentDidMount() {
  this.setState({ dogs: this.props.dogs })
}

_handleSubmit() {
  console.log('FIELDS:', this.state.dogs)
  // now we're in business if you see your data
}

render(){
    if (this.state.dogs.length === 0) return <div>No dogs yet, loading spinner</div>
    return (
      <form onSubmit={() => this._handleSubmit()}>
        {this.state.dogs.map((dogge)=> {
          return(
            <MsgView
              dog={dogge}
              key={dogge.id}
              {/* on change, update state of field */}
              onChange={(e) => this.setState({
                {/* ie: dogs[0], dogs[45]
                    you might have to use ES6 .find() or something
                    you guys/girls see where I'm going with this
                    basically update the array or make better data structure.
                    I like the idea of this.state.dogs[doggo]
                    (so dogs is an object with dynamic keys)
                    then you can just update the value of that key with setState */}
                dogs[this.state.dogs.indexOf(dogge)]: e.target.value
              })}
            />
          )}
        }
        <button type="submit">Submit</button>
      </form>
    )
  }

//或在生命周期方法中，componentWillMount或componentDidMount代替
//在构造函数中，this.state={dogs:[]}
//抱歉，抽象地说这有点难
建造师（道具）{
超级（道具）
//在pageload上，将初始状态设置为doggo数组
此.state={
狗：这个。道具。狗
}
}
//替代溶液电位：
componentDidMount（）{
this.setState（{dogs:this.props.dogs}）
}
_handleSubmit（）{
console.log（'FIELDS:'，this.state.dogs）
//现在，如果你看到你的数据，我们就开始做生意了
}
render（）{
如果（this.state.dogs.length==0）尚未返回任何dogs，则加载微调器
返回(
这个。_handleSubmit（）}>
{this.state.dogs.map（（dogge）=>{
返回(
这是我的国家({
{/*即：狗[0]，狗[45]
您可能需要使用ES6.find（）或其他工具
你们知道我要说什么吗
基本上更新阵列或制作更好的数据结构。
我喜欢这个主意。州。狗[狗狗]
（因此狗是具有动态关键点的对象）
然后可以使用setState*/}更新该键的值
dogs[this.state.dogs.indexOf（dogge）]：e.target.value
})}
/>
)}
}
提交
)
}

我不记得它是否是
e.target.value
，但你应该明白我的意思

将道具中的狗转移到组件状态
使状态保持最新
提交后阅读
您是否调查过
Redux表单
？这会让您创建一个
handleFormSubmit（）
方法，用于启动或向后端发送带有数据的请求。@agm1984您能告诉我一个示例或文档来帮助我吗？这是行业标准的方法。如果您想尽快有效地探索Udemy，Stephen Grider也有一些很棒的教程。