如何从材料-ui TextField，DropDownMenu组件中获取数据？

6 回答

• 70

  use the accepted answer / this was the answer to another (already deleted) question

  @karopastal

  将 ref 属性添加到 <TextField /> 组件并在其上调用getValue（），如下所示：

  零件：

  <TextField ref="myField" />
  

  使用getValue：

  this.refs.myField.getValue()
  

  回复于 2024-04-28T10:42:20+08:00
• 2

  为每个 TextField 和 DropDownMenu 元素添加 onChange 处理程序 . 调用它时，将这些输入的新值保存在 Content 组件的 state 中 . 在渲染中，从 state 中检索这些值并将它们作为 value prop传递 . 见Controlled Components .

  var Content = React.createClass({
  
      getInitialState: function() {
          return {
              textFieldValue: ''
          };
      },
  
      _handleTextFieldChange: function(e) {
          this.setState({
              textFieldValue: e.target.value
          });
      },
  
      render: function() {
          return (
              <div>
                  <TextField value={this.state.textFieldValue} onChange={this._handleTextFieldChange} />
              </div>
          )
      }
  
  });
  

  现在，您在 _handleClick 方法中所要做的就是从 this.state 检索所有输入的值并将它们发送到服务器 .

  您还可以使用 React.addons.LinkedStateMixin 来简化此过程 . 见Two-Way Binding Helpers . 之前的代码变为：

  var Content = React.createClass({
  
      mixins: [React.addons.LinkedStateMixin],
  
      getInitialState: function() {
          return {
              textFieldValue: ''
          };
      },
  
      render: function() {
          return (
              <div>
                  <TextField valueLink={this.linkState('textFieldValue')} />
              </div>
          )
      }
  
  });
  

  回复于 2024-04-28T10:42:20+08:00
• 0

  flson的代码对我不起作用 . 对于那些处于类似情况的人来说，这是我稍微不同的代码：

  <TextField ref='myTextField'/>

  得到它的 Value

  this.refs.myTextField.input.value

  回复于 2024-04-28T10:42:20+08:00
• 3

  接受的答案的策略是正确的，但这是一个与当前版本的React和Material-UI一起使用的通用示例 .

  数据流应该是单向的：

  • 在MyForm控件的构造函数中初始化了initialState

  • TextArea 是从这个初始状态填充的
    _999_对TextAreas的更改通过 handleChange 回调传播到 state .

  • state 是从 onClick 回调中访问的---现在它只是写入控制台 . 如果你想添加验证，它可以去那里 .

  import * as React from "react";
  import TextField from "material-ui/TextField";
  import RaisedButton from "material-ui/RaisedButton";
  
  const initialState = {
      error: null, // you could put error messages here if you wanted
      person: {
          firstname: "",
          lastname: ""
      }
  };
  
  export class MyForm extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = initialState;
          // make sure the "this" variable keeps its scope
          this.handleChange = this.handleChange.bind(this);
          this.onClick = this.onClick.bind(this);
      }
  
      render() {
          return (
              <div>
                  <div>{this.state.error}</div>
                  <div>
                      <TextField
                          name="firstname"
                          value={this.state.person.firstname}
                          floatingLabelText="First Name"
                          onChange={this.handleChange}/>
                      <TextField
                          name="lastname"
                          value={this.state.person.lastname}
                          floatingLabelText="Last Name"
                          onChange={this.handleChange}/>
                  </div>
                  <div>
                      <RaisedButton onClick={this.onClick} label="Submit!" />
                  </div>
              </div>
          );
      }
  
      onClick() {
          console.log("when clicking, the form data is:");
          console.log(this.state.person);
      }
  
      handleChange(event, newValue): void {
          event.persist(); // allow native event access (see: https://facebook.github.io/react/docs/events.html)
          // give react a function to set the state asynchronously.
          // here it's using the "name" value set on the TextField
          // to set state.person.[firstname|lastname].            
          this.setState((state) => state.person[event.target.name] = newValue);
  
      }
  
  }
  
  
  React.render(<MyForm />, document.getElementById('app'));
  

  （注意：您可能希望为每个MUI组件编写一个 handleChange 回调以消除那个丑陋的 event.persist() 调用 . ）

  回复于 2024-04-28T10:42:20+08:00
• 5

  这是我提出的最简单的解决方案，我们得到材料-ui textField创建的输入值：

  create(e) {
          e.preventDefault();
          let name = this.refs.name.input.value;
          alert(name);
        }
  
        constructor(){
          super();
          this.create = this.create.bind(this);
        }
  
        render() {
          return (
                <form>
                  <TextField ref="name" hintText="" floatingLabelText="Your name" />
  
                  <RaisedButton label="Create" onClick={this.create} primary={true} />
                </form>
          )}
  

  希望这可以帮助 .

  回复于 2024-04-28T10:42:20+08:00
• 45

  class Content extends React.Component {
      render() {
          return (
              <TextField ref={(input) => this.input = input} />
          );
      }
  
      _doSomethingWithData() {
          let inputValue =  this.input.getValue();
      }
  }
  

  回复于 2024-04-28T10:42:20+08:00