用react.js提交大表單

表單處理react.js是件痛苦的事情。我是從角度來看的，因爲2種綁定方式非常棒，整合內容很快。但是當我作出反應時，我承認我迷路了。用react.js提交大表單

說，這是一個用戶的個人資料，我從API

var profile = { 
    name:"Gaila", 
    age:22, 
    skills: [{id:1,name:"react"},{id:1,name:"angular"}], 
    club: [{id:1,name:"dancing"},{id:1,name:"hiking"}], 
    description: "some long string" 
};

上了車我有text input，textarea，checkbox和select的UI這個數據。

當用戶點擊保存時，我該如何處理？我必須使用onChange綁定每個輸入元素嗎？像handleNameChange，handleAgeChange，handleSkillsChange .. omg它是荒謬的。

所以裁判進入了我的腦海裏，很容易，只是做ref="name"，我可以通過ReactDOM.findDOMNode(this.refs.name).value得到它，但等待，它不<select>工作，它的壞的某個時候我用裁判，有時我去帶手柄的功能。

夥計們，我真的很需要幫助！

來源

2017-03-06 Giala Jefferson

我不確定我是否理解這個問題。如果您關心的所有內容都提交，您爲什麼需要綁定更改函數？您是否每次提交表單值時都要提交？ –

https://stackoverflow.com/questions/21029999/react-js-identifying-different-inputs-with-one-onchange-handler – paqash

如果你不想在每個表單元素上綁定一個事件（你可以重用同樣的功能記住所以它不是那麼荒謬）你可以使用Redux形式。 – spirift

這裏是重用的事件處理程序，並拿起的例子與事件的區別。請參閱codepen。

const FormFunc =() => { 

    const changeHandler = (e) => { 
    console.log(`e.target.name, name: `, e.target.name, e.target.value) 
    } 
    return (
    <form> 
     <input onChange={changeHandler} type='text' name='firstName' /> 
     <input onChange={changeHandler} type='text' name='surname' /> 
     <input onChange={changeHandler} type='phone' name='phone' /> 
     <input onChange={changeHandler} type='email' name='email' /> 
    </form> 
) 
}

來源

2017-03-06 17:28:55 spirift

如果您只需要提取表單值，則可以使用form-serialize - 它可以通過npm作爲包提供。

在您的組件，一個提交事件添加到您的窗體：

<form onSubmit={this.handleSubmit}>

你的處理程序提取的形式，像這樣：

handleSubmit = (event) => { 
    event.preventDefault() 
    const values = serializeForm(event.target, { hash: true }) 
    console.log(values) 
}

來源

2017-03-06 15:44:52

我可以有包的鏈接嗎？我沒有使用jQuery。 –

@GialaJefferson \t Google上的2s：https：//www.npmjs.com/package/form-serialize –

@DaveNewton是爲jquery嗎？ –

用react.js提交大表單

回答

相關問題