[reactjs] React.js 양식 구성 요소에서 상태 또는 참조를 사용합니까?

React.js로 시작하고 간단한 양식을 작성하고 싶지만 문서에서 두 가지 방법을 찾았습니다.

첫 번째 는 Refs를 사용하는 것 입니다 .

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var author = React.findDOMNode(this.refs.author).value.trim();
    var text = React.findDOMNode(this.refs.text).value.trim();
    if (!text || !author) {
      return;
    }
    // TODO: send request to the server
    React.findDOMNode(this.refs.author).value = '';
    React.findDOMNode(this.refs.text).value = '';
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

그리고 두 번째는 사용 상태 (가) 성분 반작용 내부 :

var TodoTextInput = React.createClass({
  getInitialState: function() {
    return {
      value: this.props.value || ''
    };
  },

  render: function() /*object*/ {
    return (
      <input className={this.props.className}
      id={this.props.id}
      placeholder={this.props.placeholder}
      onBlur={this._save}
      value={this.state.value}
      />
    );
  },

  _save: function() {
    this.props.onSave(this.state.value);
    this.setState({value: ''
  });
});

두 가지 대안이 있다면 장단점을 볼 수 없습니다. 감사.

답변

  const [inputsValues, setInputsValues] = useState([])
  const setInputValue = (id, value) => {
    const arr = [...inputsValues]
    arr[id] = value
    setInputsValues(arr)
  }

value={inputsValues[id] || ''}
onChange={event => setInputValue(id, event.target.value)}

  const inputsRef = useRef([])

ref={input => (inputsRef.current[id] = input)}

inputRef={input => (inputsRef.current[id] = input)}