Question

我有一个通过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

Answer 1

我认为您需要在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仅用于设置初始组件状态值，允许对其进行编辑。

Answer 2

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。

通过这种方式，您可以在本地状态下维护更新的值。

Answer 3

你正在使用不受控制的输入元素，即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()});
}

在React中发布更改的表单字段值

3 个答案: