Question

我正在编写一个无状态的React组件，因为在不需要时避免使用状态是最佳做法。

组件表示输入字段，当输入框包含值时，该字段执行函数。

export const InputField = (props) => {

  const InputFieldContentsChanged = (event) => {
    props.onChange(event.target.value);
  };

  return (
    <div data-component="input-field"
      className={(props.value !== "" ? "value": "")}>
      <input type={props.type} value={props.value} onChange={InputFieldContentsChanged} />
      <span className="bar"></span>
      <label>{props.label}</label>
    </div>
  );
};

InputField.PropTypes = {
  type: PropTypes.oneOf([ "text", "password" ]).isRequired,
  label: PropTypes.string.isRequired,
  value: PropTypes.string,
  onChange: PropTypes.func.isRequired
}

现在，我已经创建了另一个组件，它只是一个测试上面组件的示例。这看起来如下：

export const SampleComponent = (props) => {

  let componentUsername = "";

  const onUsernameChanged = (username) => {
    componentUsername = username;
  };

  return (
    <InputField type="text" label="Username" value={componentUsername} onChange={onUsernameChanged} />
  );
};

因此，我将value绑定到组件中的自定义变量，当输入字段的内容发生更改时，该变量会更改。

输入字段组件如何使用新用户名更新自身？

亲切的问候，

Answer 1

我正在编写一个无状态的React组件，因为在不需要时避免使用状态是最佳做法。

在你的代码中，你试图使用你自己的那种状态＆＃34;虽然，它只是一个变量（HTTP 200 OK { "count": 1023 "next": "https://api.example.org/persons/?page=2&per_page=10", "previous": null, "results": [ … ] }）。但由于它不是React状态，因此组件不会在变量更改时重新呈现。 React根本不知道变化。

所以，要么使用通常的componentUsername而不是重新分配你自己的＆＃34;状态＆＃34;变量，或将逻辑放在父组件中，并通过道具将setState传递给componentUsername：

＆＃13;

SampleComponent

＆＃13;

const SampleComponent = props => (
  <input type="text" onChange={props.onChange} value={props.value} />
);

class ParentComponent extends React.Component {
  constructor() {
    super();
    this.state = { value: '' };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(e) {
    console.log(e.target.value);
    this.setState({ value: e.target.value });
  }

  render() {
    return (
      <SampleComponent
        value={this.state.value}
        onChange={this.handleInputChange}
      />
    );
  }
}

ReactDOM.render(<ParentComponent />, document.getElementById('root'));

＆＃13;

Answer 2

功能组件的想法是他们不对状态或道具执行任何修改，因为没有触发器重新渲染组件，您没有看到任何变化。将其更改为React组件

＆＃13;

     const InputField = (props) => {
    
      const InputFieldContentsChanged = (event) => {
        console.log(event.target.value);
        props.onChange(event.target.value);
      };
    
      return (
        <div data-component="input-field"
          className={(props.value !== "" ? "value": "")}>
          <input type={props.type} value={props.value} onChange={InputFieldContentsChanged} />
          <span className="bar"></span>
          <label>{props.label}</label>
        </div>
      );
    };
    
     class  SampleComponent extends React.Component{
      constructor() {
          super();
          this.state = { componentUsername : ""};
      }
       onUsernameChanged = (username) => {
        console.log(username);
        this.setState({componentUsername: username});
      }
      render() {
    
      return (
        <InputField type="text" label="Username" value={this.state.componentUsername} onChange={this.onUsernameChanged} />
      );
      }
    };
    
    ReactDOM.render(<SampleComponent/>, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

更改值

2 个答案: