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

Question

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

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

原文由 dczii 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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>
        );
      }
    }

原文由 WitVault 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

 <TextField ref='name'/>

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

你当然可以像这样检索值

this.refs.name.getValue()

原文由 James 发布，翻译遵循 CC BY-SA 3.0 许可协议