小编Piy*_*ush的帖子

如何在 React JS 中上传图片?

<div className="mb-1">
     Image <span className="font-css top">*</span>
     <div className="">
         <input type="file" id="file-input" name="ImageStyle"/>
     </div>
</div>
Run Code Online (Sandbox Code Playgroud)

这是我提供的片段,我用来在 react js 中从设备中选择文件,使用它我可以选择文件,并且还显示文件名我现在想要的是将此文件存储在 S3 或任何地方和从那里获取它的 URL 并使用 fetch api 调用将它发布到我的服务器。

reactjs

11
推荐指数
3
解决办法
4万
查看次数

将API令牌保存到本地存储ReactJS

我想知道如何将令牌保存到本地存储.我正在注册并生成相关令牌,我必须将其保存到本地存储.而且当我打开登录页面时,我必须获取它以检查它.

我的代码:

import React, { Component } from 'react';
import { Link } from 'react-router'
class Register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputfirstname: '',
      inputlastname: '' ,
      inputemail: '' ,
      inputpassword: ''
    };

    this.handleFirstName = this.handleFirstName.bind(this);
    this.handleLastName = this.handleLastName.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleEmail = this.handleEmail.bind(this);
    this.handlePassword = this.handlePassword.bind(this);
  }
  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }
  handleFirstName(event) {
    this.setState({inputfirstname: event.target.value});
  }
  handleLastName(event) {
    this.setState({inputlastname: event.target.value});
  }
  handleEmail(event) {
    this.setState({inputemail: event.target.value});
  }
  handlePassword(event) {
    this.setState({inputpassword: event.target.value});
  } …
Run Code Online (Sandbox Code Playgroud)

reactjs

6
推荐指数
2
解决办法
6600
查看次数

如何在 React 或 React-Redux 中将数据从一个组件传递到另一个组件?

import React, { Component } from 'react';


class BigText extends Component {

  constructor(props) {
        super(props);

        this.state = {
            title: '',
            text: '',
            summary: ''
        };

        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(event) {

        this.setState({
            [event.target.name]: event.target.value
        });

    }

  render() {
 
    return ( 
      <div>
        <div>
          <div className="row animated fadeIn">
  
                <div className="px-1" style={{ width:100 + '%' }}><br />

                    <div className="mb-1">
                      <input type="text"
                       className="form-control" 
                       placeholder="Title"
                       name="title"
                       value={this.state.title}
                       onChange={this.handleInputChange}
                       />
                    </div>

                    <div className="mb-1">
                      <textarea 
                      className="form-control" 
                      placeholder="Text"
                      name="text"
                      value={this.state.text}
                      onChange={this.handleInputChange}
                      />
                    </div>

                    <div className="mb-1">
                      <textarea
                       className="form-control" 
                       placeholder="Summary" …
Run Code Online (Sandbox Code Playgroud)

reactjs react-redux

5
推荐指数
1
解决办法
3万
查看次数

期望在React JS中返回此函数array-callback-return末尾的值

render() {

        const rowLeft = [];
        const rowRight = [];
        let a = this.props.ntn;
        

       Object.keys(this.props.ntn).map((keyName, keyIndex) =>{

        if (keyName === "_id" || keyName === "name" || keyName === "description" || keyName === "instant" || keyName === "active") {
                  if (keyName === "beacon" || keyName === "group") {

            return rowLeft.push(<InfoRow notification={keyName} notificationValue={a[keyName].name.toString()} key={keyIndex}/>)
          } 

        else if (a[keyName].offers) {

            return rowLeft.push(<InfoRow notification={keyName} notificationValue={a[keyName].offers.toString()} key={keyIndex}/>)
          }

          else {

            return rowLeft.push(<InfoRow notification={keyName} notificationValue={a[keyName].toString()} key={keyIndex}/>)
         }}
       
       });

       Object.keys(this.props.ntn).map((keyName, keyIndex) =>{

        if (keyName === "levelType" || …
Run Code Online (Sandbox Code Playgroud)

reactjs

5
推荐指数
1
解决办法
1万
查看次数

不要直接改变状态,在React JS中使用setState()react/no-direct-mutation-state

<input
  defaultValue={this.props.str.name}
  ref={(input) => { this.state.name = input; }}
  name="name"
  type="text"
  className="form-control"
  onChange={this.handleInputChange}
/> 

handleInputChange(event) {
  this.setState({
    [event.target.name]: event.target.value
  });
}

if(this.state.name.value === "") {
  this.msg.show('Required fields can not be empty', {
    time: 2000,
    type: 'info',
    icon: <img src="img/avatars/info.png" role="presentation"/>
  });
}
Run Code Online (Sandbox Code Playgroud)

我正在尝试设置默认值,并希望也可以访问它.我确实喜欢这个并且访问了值,this.state.name.value但事情是它的工作,但显示警告

不要直接改变状态,使用setState()react/no-direct-mutation-state.

reactjs eslint

5
推荐指数
1
解决办法
1万
查看次数

标签 统计

reactjs ×5

eslint ×1

react-redux ×1