Question

我是新手，我正在尝试从handleSubmit中的firstName输入中获取值。 handleSubmit正在工作但由于某种原因输入值未定义。我尝试了一些其他的例子，但它们都是React组件中的所有形式。

let SomeForm = (props) => {

  let firstName = '';

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(firstName);
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <TextField
          floatingLabelText="First Name"
          floatingLabelFixed={true}
          underlineStyle={styles.underlineStyle}
          underlineFocusStyle={styles.underlineFocusStyle}
          value={firstName}
        />
        <input type="submit" value="Submit" />
      </form>
    </div>
  )
}
SomeForm = connect()(SomeForm)

export default SomeForm

Answer 1

您需要将onChange添加到TextField以处理更新。由于SomeForm是一个有状态组件，因此您可能需要使用class组件而不是无状态功能组件。

class SomeForm extends React.Component {
  state = {
    firstName: ''
  };

  handleChange = (e, value) => {
    this.setState({ firstName: value });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    console.log(this.state.firstName);
  };

  render () {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <TextField
            id="text-field-controlled"
            floatingLabelText="First Name"
            floatingLabelFixed={true}
            underlineStyle={styles.underlineStyle}
            underlineFocusStyle={styles.underlineFocusStyle}
            value={this.state.firstName}
            onChange={this.handleChange}
          />
          <input type="submit" value="Submit" />
        </form>
      </div>
    )
  }
}

在此处查看TextField的API和示例：http://www.material-ui.com/#/components/text-field

Answer 2

您需要在TextField组件中输入的函数，并且使用onChange可以获得输入值。

handleChange(e){
     Console.log(e.target.value)
}

在TextField中

<TextField onChange={this.handleCahnge}/}

或使用refs

<TextField ref="textfield" />

使用this.refs.textfield.getValue()

获取价值

reactjs容器组件形式值

2 个答案: