前端学习问题与经验总结

我爱学习嗷嗷嗷

已于 2023-01-21 06:59:19 修改

阅读量407

点赞数

文章标签： javascript css

于 2022-11-07 05:34:34 首次发布

本文链接：https://blog.csdn.net/qq_45342277/article/details/127724156

版权

Property assignment expected

google后得知问题出在jsx的return后面写的statement是用 () 的，而不是 {} 。包括element也是一样的，用（）

A class member cannot have the 'const' keyword

字面意思。可以用readonly代替。（具体用法本人还没看

class xxx extends xx {
    render(){ ... }
}

有些奇怪这个render后面跟一个括号再跟curly braces的操作。是同理function render() { ... }吗？

HTML form的attribute：action onSubmit onClick

The action is an attribute that specifies where to send the form-data when a form is submitted. (aka what is the 2nd page that is supposed to receive the form-data once this form is submitted)

The onsubmit attribute is used to specify which JS code to run.

注意，React里面要写onSubmit而不是onsubmit

关于React的component

什么是component：a button, a form, a dialog, a screen...

详细请参看React.Component – React

The only method you must define in a React.Component subclass is called render().

These methods are called in the following order when an instance of a component is being created and inserted into the DOM:

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

Updating

An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

Unmounting

This method is called when a component is being removed from the DOM:

componentWillUnmount()

Error Handling

These methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.

static getDerivedStateFromError()
componentDidCatch()

super(props)

When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor

constructor(props)

Typically, in React constructors are only used for two purposes:

Initializing local state by assigning an object to this.state.
Binding event handler methods to an instance.

注意constructor里面不要写this.setState(), 可以写this.state = { ... }

而在其他地方要写setState。

js-onchange //同样在react里面camel-cased

The onchange event occurs when the value of an element has been changed.

参考onchange Event

`useState` hook

好像是一个新特性代替setState 还没看

Your render method should have a return statement

字面意思

class名必须大写

此处省略debug时的无数句脏话

setState需key与value一一对应

setState的异步

用btn还是href还是router？

btn可以配合onClick，改变props

router，实现页面的变换

如何实现button在中间

把button用div框起来

    <div class="col text-center">
      <button class="btn btn-default">Centered button</button>
    </div>

实现按下按钮调用modal

首先，bootstrap docs中，modal的定义如下：

Modals are positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.

即modal一定会盖过其他所有东西。

我本来尝试onClick={Modal()}，并在Modal里return 想展示的modal。事实证明这是本人瞎搞。

解决的办法是把想展示的modal放在button的整一个的return的后面，并且用isOpen来控制modal的展示与否。

关于onClick={}里面到底是什么

理论上说是一个function。但是不加（）？

关于onChange

下面一段话解释了event.target.value是什么意思。

The value of the prop is the handleChange function; It is an event handler. The event that the handler receives as a parameter is an object that contains a target field. This target is the DOM element that the event handler is bound to (ie, the text input field). By accessing this field, we can determine what the target's value is changed to.