ReactJS - 如何从 material-ui 设置文本字段的值？答案

【问题标题】：ReactJS - How can I set a value for textfield from material-ui?ReactJS - 如何从 material-ui 设置文本字段的值？
【发布时间】：2016-06-17 21:28:05
【问题描述】：

我有一个 selectField，我想在上面设置一个值。假设我在上面输入，当我单击一个按钮时，该按钮将调用一个函数来重置文本字段的值？

<TextField hintText="Enter Name" floatingLabelText="Client Name" autoWidth={1} ref='name'/>

【问题讨论】：

将值添加到带有状态的 TextField。创建一个按钮，在按钮上单击调用 setState 并更改值
fwiw，我一直在使用 defaultValue 而不是 value，这导致在外部更改值时 TextField 不更新（通过 TextField 之外的另一个函数）

标签： reactjs material-ui

【解决方案1】：

你可以这样做

export default class MyCustomeField extends React.Component {

      constructor(props) {
        super(props);

        this.state = {
          value: 'Enter text',
        };
      }

      handleChange = (event) => {
        this.setState({
          value: event.target.value,
        });
      };

     handleClick = () => {
        this.setState({
          value:'',
        });
      };

      render() {
        return (
          <div>
            <TextField
              value={this.state.value}
              onChange={this.handleChange}
            />
            <button onClick={this.handleClick}>Reset Text</button>
          </div>
        );
      }
    }

【讨论】：

当我同时使用“value”和“onChange”道具时，我收到以下警告：“警告：TextField 正在更改要控制的文本类型的不受控输入。输入元素不应从不受控切换到受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。更多信息：https://fb.me/react-controlled-components"
@WebBrother 可能是 this.state.value 未定义的情况。如果您不想提供某些值，this.state.value 应该返回空字符串而不是 undefined。
@WebBrother 你可以通过设置value={this.state.value || ''}来避免该警告
更新太慢了，快速打字感觉不太好。
-1。这是一个非常糟糕的答案。文本字段状态由文本字段元素拥有！您不应该在主要元素中复制它 - 这是一个非常糟糕的设计并导致上述问题。而是使用 inputRef={this.textFieldRef)。现在文本内容在this.textFieldRef.current.value下，你可以随意设置和阅读。

【解决方案2】：

坚持认为，正确的方法是让组件在像那里公认的答案这样的场景中受到控制，但您也可以以这种粗俗且文化上不可接受的方式控制价值。

<TextField ref='name'/>

this.refs.name.getInputNode().value = 'some value, hooray'

你当然可以像这样检索值

this.refs.name.getValue()

【讨论】：

【解决方案3】：

你应该使用inputRef而不是ref

const MyComponent = () => {
  let input;

  return (
    <form
      onSubmit={e => {
        e.preventDefault();
        console.log(input.value);
      }}>
      <TextField
        hintText="Enter Name" 
        floatingLabelText="Client Name" 
        autoWidth={1}
        inputRef={node => {
          input = node;
        }}/>
    </form>
  )
};

【讨论】：

【解决方案4】：

我更喜欢这种方式来分配状态变量：

<TextField value={mobileNumber} 
     onChange={e => { this.setState({ mobileNumber: e.target.value }) }}
     className={classes.root}
     fullWidth={true}
     label={t('mobile number')} />

【讨论】：

【解决方案5】：

这是一个简短的简单 React Hook 版本的答案

export default function MyCustomeField({
  initialValue= '', 
  placeholder= 'Enter your text...'
}) {
  const [value, setValue] = React.useState(initialValue)

  return (
    <div>
      <TextField
        placeholder={placeholder}
        value={value}
        onChange={e => setValue(e.target.value)}
      />
      <button onClick={() => setValue(initialValue)}>Reset Text</button>
    </div>
  );
}

【讨论】：