我有一个通过props传递值的表单,并提交到端点以更新用户信息。但是,我无法发送文本输入字段的已编辑值,因为当用户更改其值时需要管理和更新其状态,但在用户更改时无法设置/更新输入的状态该值,允许发布不同的值。
class DisplayNameModal extends React.Component {
constructor (props){
super(props)
this.state = {
displayName: this.props.displayName,
email: this.props.email.split('@')[0]
}
this.updateDisplayName = this.updateDisplayName.bind(this)
}
updateDisplayName () {
const email = this.props.email
const displayName = this.state.displayName
const user = {
email,
displayName
}
superagent
.put('/api/user')
.send({user})
.then(this.closeModal)
}
handleDisplayNameChange = e => this.setState({ displayName: e.target.value })
render (props) {
const {contentStrings} = this.props.config
return (
<div>
{ !this.props.displayNameModalActive &&
<div className='display-name-container' style={{ backgroundImage: `url(${this.props.bgImgUrl})` }}>
<div className='display-name-content'>
<h2 className='heading'>{contentStrings.displayNameModal.heading}</h2>
<p>{contentStrings.displayNameModal.subHeading}</p>
<input type="text"
defaultValue={this.state.displayName}
onChange={this.handleDisplayNameChange}
minLength="3"
maxLength="15"/>
<button
type='submit'
onClick={this.updateDisplayName}
className='btn btn--primary btn--md'>
<span>{contentStrings.displayNameModal.button}</span>
</button>
<p className='cancel'>{contentStrings.displayNameModal.cancel}</p>
</div>
</div>
}
</div>
)
}
}
export default DisplayNameModal
答案 0 :(得分:0)
我认为您需要在onChange
上<input />
更新displayName
组件状态。
handleDisplayNameChange = e => this.setState({ displayName: e.target.value });
<input type="text"
value={this.state.displayName}
minLength="3"
maxLength="15"
onChange={this.handleDisplayNameChange}
/>
而不是defaultValue
,使用value
将其设为controlled input
然后在您的updateDisplayName
中,您将使用this.state.displayName
代替this.props.displayName
。 prop仅用于设置初始组件状态值,允许对其进行编辑。
答案 1 :(得分:0)
onChange事件,调用方法,并在其中使用 else if (Session["UserId"].Equals("132") || (Session["UserId"].Equals("210"))
|| (Session["UserId"].Equals("41")) || (Session["UserId"].Equals("103"))
|| (Session["UserId"].Equals("404")) || (Session["UserId"].Equals("130"))
|| (Session["UserId"].Equals("92")) || (Session["UserId"].Equals("490"))
|| (Session["UserId"].Equals("172")))
{
//do something
}
将更改的文本设置为在this.setState
框中键入时的状态。
在提交时,使用更新的Input
值将其传递给API。
通过这种方式,您可以在本地状态下维护更新的值。
答案 2 :(得分:0)
你正在使用不受控制的输入元素,即React不知道,wats继续使用你的输入元素 为了让React了解它,它应该成为受控制的组件。
这可以通过将它的值连接到组件的状态来完成, 检查下面的例子。
这意味着,在任何时候,反应都会知道,wat是输入元素的值
受控制的组件
在HTML中,表单元素如,和,通常维护自己的状态并根据用户输入更新它。在React中,可变状态通常保存在组件的state属性中,并且仅使用setState()更新。
我们可以通过使React状态成为“单一事实来源”来将两者结合起来。然后,呈现表单的React组件还控制在后续用户输入中该表单中发生的事情。输入表单元素的值由React以这种方式控制,称为“受控组件”。
例如,如果我们想让前面的示例在提交时记录名称,我们可以将表单编写为受控组件:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
由于在我们的表单元素上设置了value属性,因此显示的值将始终为this.state.value,使React状态成为事实的来源。由于handleChange在每次击键时运行以更新React状态,因此显示的值将在用户输入时更新。
使用受控组件,每个状态变异都将具有关联的处理函数。这使得修改或验证用户输入变得简单。例如,如果我们想强制使用全部大写字母写入名称,我们可以将handleChange写为:
handleChange(event) {
this.setState({value: event.target.value.toUpperCase()});
}