Question

我尝试使用inputRef（材料ui输入组件）创建自定义输入组件。看起来组件引用正在工作，但在设置值属性后，我无法在文本字段中输入任何值。我认为这是因为我实现onchange事件的方式。我不确定我错过了什么。请帮忙。

这是codesandbox网址

https://codesandbox.io/s/pjlwqvwrvm

Answer 1

实际上你不需要onChange道具来获得改变的值..

只需从onchange获取值并将值设置为状态value。

另一个错误是你没有创建构造函数，并将this.props.value赋予值prop。那是它没有得到更新..

现在我创建了构造函数并将this.state.value赋予值props。

现在，您可以在custominput组件和提交功能中获得不变的值..

import React from "react";
import { render } from "react-dom";
import { Input } from "material-ui-next";
import trimStart from "lodash/trimStart";
import PropTypes from "prop-types";

const defaultProps = {
  state: "",
  onChange: () => {} // no need
};

const propTypes = {
  state: PropTypes.string,
  onChange: PropTypes.func
};

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      value:''
    }
  }
  handleSubmit(event) {
    event.preventDefault();
    console.log("state: " + this.state.value); //shows onChanged value in console
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <CustomInput
            labelText="State"
            id="state"
            value={this.state.value}
            onChange={e=> {
              this.setState({value:e.target.value})
            }}
          />
        </form>
      </div>
    );
  }
}

App.propTypes = propTypes;
App.defaultProps = defaultProps;

class CustomInput extends React.Component {
  render() {
    const {
      classes,
      formControlProps,
      value,
      onChange,
      labelText,
      id,
      labelProps,
      inputRef,
      inputProps
    } = this.props;
    return (
      <div {...formControlProps}>
        {labelText !== undefined ? (
          <div htmlFor={id} {...labelProps}>
            {labelText}
          </div>
        ) : null}
        <Input
          classes={{
            root: labelText !== undefined ? "" : classes.marginTop
          }}
          id={id}
          value={value} ///////// Fixed ////////
          onChange={onChange}
          inputRef={inputRef}
          {...inputProps}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

这是沙箱中的代码检查它..

https://codesandbox.io/s/84rjk4m8l8

Answer 2

您可以继续使用inputRef - 然后您的值和onChange事件是额外的 - 它被称为不受控制的Component。您可以在此处查看更多相关信息：https://reactjs.org/docs/uncontrolled-components.html
或者你可以用价值＆amp; onChange事件 - 并使用受控组件，您可以在此处找到有关受控组件的更多信息：https://reactjs.org/docs/forms.html#controlled-components

如何用inputRef解决它（不可控制）：

class App extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault();
    console.log("input value: ", this.input.value); // will now show you correct input value
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <CustomInput
            labelText="State"
            id="state"
            inputRef={input => {
              this.input = input;
            }}
          />
          <Button onClick={this.handleSubmit} color='primary'>Submit</Button>
        </form>
      </div>
    );
  }
}

而不是＆＃34; this.state = input＆＃34;，将输入绑定到其他内容，因为this.state是为React Component的本地状态保留的，它不会使用它，而不是像这一点。

如何用状态，值和＆解决它（可控） onChange事件：

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: props.state || ''
    }
  }

  handleSubmit = (event) =>{
    event.preventDefault();
    console.log("state: ", this.state.value); // will now show you correct input value
  }

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

  render() {
    const {value} = this.state;

    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <CustomInput
            labelText="State"
            id="state"
            onChange={this.handleChange}
            value={value}
          />
          <Button onClick={this.handleSubmit} color='primary'>Submit</Button>
        </form>
      </div>
    );
  }
}

请注意，我添加了构造函数并为组件定义了本地状态，并且我使用this.setState更改了状态内的值（因为状态是不可变的，并且这是更新它的正确方法）。

在这两个示例中，您都可以在handleSubmit方法中获取输入值，您将使用可控制或不可控制的组件，它取决于您：）

Answer 3

使用value={this.state}或value={this.value}

这是您的沙盒代码已更新

https://codesandbox.io/s/qqk2qoxmlj

材料Ui - 无法在受控组件上输入输入文本字段/设置值

3 个答案: