Question

我有这种结构。

import pandas as pd                                                                           

df = pd.DataFrame.from_dict({'a1_P': [123.123, 342.123],
                             'a2_P': [232.12, 32.23],
                             'weight': [12312.23, 16232.3]})                        

cols = [x for x in df.columns if '_P' in x]                                         

new = pd.concat([df[col] for col in cols])                                          
oldidx = new.index                                                                  
weights = df.loc[new.index, 'weight'].tolist()                                      

new_df = pd.DataFrame.from_dict({'P': new,                                          
                                 'weight': weights})                                
new_df.sort(columns='P', inplace=True)                                           
new_df.reset_index(drop=True, inplace=True)   

print(new_df)

         P    weight                                                                          
0   32.230  16232.30
1  123.123  12312.23
2  232.120  12312.23
3  342.123  16232.30

我添加了新的动态表单，我想知道如何获取所有输入值来自提交的PlayerFormBox中的表单

<PlayerFormBox>
   - <PlayerForm>

Answer 1

当值更改时，您应该使PlayerForm组件触发事件并将这些值存储在PlayerFormBox的状态中。这样，您将在提交时获得所有值。事实上，对于React，最好不要直接提交表单。最好使用input字段构建model，然后使用可在浏览器上工作的请求库（例如{{3}）通过Ajax处理并提交此model }。

因此，在PlayerForm中，让它触发一个事件：

var PlayerForm = React.createClass({

handleChange: function(event) {
    // it's passing the index and the value as parameters
    this.props.onChange(this.props.index, event.value);
}

render: function () {
    return (
        <div>
            <input key={this.props.index} onChange={handleChange} type="text" name="name">
        </div>
    );
})

现在，在PlayerFormChanged上创建一个PlayerFormBox函数，然后在创建新PlayerForm时将其作为处理程序传递：

for(i = 0; i < this.state.numOfPlayers; i++){
    formFields.push(<PlayerForm key={i} onValueChange={onPlayerFormValueChange}/>);
}

现在在onPlayerFormValueChange函数中，构建一个模型，如下所示：

onPlayerFormValueChange: function(index, value) {
     // now you should set this.state.model[index] = value
     // Use the imutability helpers here: https://facebook.github.io/react/docs/update.html
     // this will result on a setState that will render everything again accordingly 
}

现在，提交后，PlayerForm的状态就是模型。

如何使用ReactJS从输入字段中获取所有值？

1 个答案: