Question

我正在尝试手动清除ReactJS中输入的值。现在我设置它，以便更新字段的值更新父应用程序的状态，并且按下“Enter”键时父应用程序的状态重置，但我无法获取输入以清除其值以匹配父应用程序的状态。

我刚刚开始，所以我确信我的代码存在很多问题。感谢您提供的任何帮助。

class AddNote extends Component {
  componentWillUpdate() {
    console.log(store.getState().searchHandler.searchTerm);
    this.state = {searchTerm: store.getState().searchHandler.searchTerm};
  }
  constructor() {
    super();
    this.state = {
      searchTerm: undefined
    }
  }
  render() {
    const {
      onAddClick,
      onSearchUpdate,
      searchHandler,
    } = this.props;
  let searchTermInput;
  return (
    <div>
      <input
        ref={node => {
          searchTermInput = node;
        }}
        value={this.state.searchTerm}
        onChange={this.props.onChange.bind(this)}
        onKeyPress={(e) => {
          let searchTermToPass = searchTermInput.value;
          onAddClick(e, searchTermToPass); 
        }}
      />
    </div>
    );
  }

class RecollectApp extends Component {
  componentWillUpdate() {
    console.log("We're updating!");
  }
  render() {
    const {
      notes,
      searchHandler,
    } = this.props;
    return (
      <div>
        <AddNote
          onAddClick={(e, searchTerm) => {
            if (e.charCode === 13) {
              store.dispatch({
                type: 'ADD_NOTE',
                id: nextNoteID++,
                title: searchTerm,
              });
              store.dispatch({
                type: 'RESET_STATE',
              });
            }
          }
          }
          onChange={(e) => {
            store.dispatch({
              type: 'UPDATE_STATE',
              searchTerm: e.target.value,
            });
            this.value = "";
          }}

        />
        <NoteList
          notes={notes}
          onNoteClick={id =>
            store.dispatch({
              type: 'SELECT_NOTE',
              id,
            })
            }
        />
      </div>
      );
  }
}

Answer 1

您的问题是，在更改状态后，您不会强制在AddNote组件中重新呈现。您应该使用setState方法：

，而不是直接设置状态

class AddNote extends Component {
  componentWillUpdate() {
    this.setState({
      searchTerm: store.getState().searchHandler.searchTerm,
    });
  }
  // Other methods...
}

据我了解，您无需在其他位置使用value组件中的输入AddNote。
因此您无需将其存储在redux状态。

根据这一点，您的AddNote组件可以这样实现：

// We need to install additional npm module, for serializing form data.
import serialize from 'form-serialize';

// As you don't need local state, you can implement component as pure function.
function AddNote({ onSubmit }) {
  let input;

  function handleSubmit(e) {
    // Preventing default form behavior.
    e.preventDefault();

    // Serializing formData to javascript object.
    const formData = serialize(e.target, {
      hash: true
    });

    // Resetting input value.
    input.value = '';

    onSubmit(formData.title);
  }
  // We are using `onSubmit` prop of form element, to add note, instead of determining `enter` keycode.
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="title" ref={node => input = node} />
    </form>
  );
}

class RecollectApp  extends Component {
  render() {
    const { notes } = this.props;
    return (
      <div>
        {
          // Here we are simply dispatching `value` given from `onSbumit` callback.
        }
        <AddNote
          onSubmit={value => store.dispatch({
            type: 'ADD_NOTE',
            // Note, from your provided code `nexNoteID` is undefined.
            id: nextNoteID++,
            title: value,
          })}
        />
        <NoteList
          notes={notes}
          onNoteClick={id =>
            store.dispatch({
              type: 'SELECT_NOTE',
              id,
            })
          }
        />
      </div>
    );
  }
};

Answer 2

AddNote组件中输入的onChange应为：

handleChange(e) {
  this.setState({ searchTerm: e.target.value });
  this.props.onChange(e, e.target.value);
}

根据父级状态手动更改ReactJS输入的状态

2 个答案: