小编int*_*net的帖子

在 React.js 中的输入标签上实现自动保存

我正在尝试实现 Google 任务添加任务功能（参见图片以供参考）。基本上，当您单击“添加任务”按钮时，它会打开一个输入字段，该字段会在您键入时自动保存。我正在尝试在 React.js 中实现它。

class App extends Component {

  state = {
    showInput: false,
    addTaskInput: ''
  }

  showAddTask = (e) => {
    this.setState({showInput: true})
  }

  saveInput = (e) => {
    this.setState({addTaskInput: e.target.value})
  }

  render() {
    const {showInput, addTaskInput} = this.state;
    return (
      <div className="app">
        <Button
          message="Add Task"
          bsStyle="primary"
          onClick={this.showAddTask}
        />
        { showInput && <input
          type="text"
          placeholder="Add Task here..."
          value={addTaskInput}
          onChange={this.saveInput}
        /> }
        <TodoList addItem={}/>
      </div>
    );
  }
}

Run Code Online (Sandbox Code Playgroud)

这是我的代码。App是我的主要组成部分。TodoList是具有完整待办事项列表的组件。我要做的是： 当我在输入中键入内容时，它会触发onChange并设置状态。在 onChange 内部，我还会更改addItem …

javascript reactjs

int*_*net

2018 05-09

3
推荐指数

1
解决办法

1699
查看次数

使用基于 props 更新的状态来反应 useState

我有一个功能性的 React 组件，大致如下所示：

const MyComponent = (prop1) => {
  
  const [myState, setState] = useState(prop1)  

  return <>
    {myState && <div>Some text...</div>}
    <div onClick={() => setState(true)}>Click me</div>
  </>
}

Run Code Online (Sandbox Code Playgroud)

这显然不起作用，因为 React 只计算一次初始状态部分，因此myState不会在prop1更改时更新。

有没有办法在不使用的情况下完成这项工作useReducer？这是一个很好的用例吗useEffect？

javascript frontend reactjs react-hooks use-state

int*_*net

lucky-day

3
推荐指数

1
解决办法

3629
查看次数