用户输入未正确影响边框半径

问题描述

我的目标是创建一个边界半径预览器，用户可以在其中定义边界半径的影响。当我尝试输入时，输入值不会发生任何事情。当我删除键入的值时，默认值更改将消失。

我试图修改代码，并尝试搜索其他问题和答案，但没有找到解决方法。

import React from 'react';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      topleft: 30,topright: 30,bottomright: 30,bottomleft: 30
    }
  }
  
  handleChange = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({[nam]: val});
  }
  
  render() {

    const borderStyle = {
      borderRadius: this.state.topleft,background: "#73AD21",padding: "20px",width: "200px",height: "150px",}
    
    return (
      <div className="App">
        <h1>Border-Radius Previewer</h1>
        <p style={borderStyle}>Box</p>
        <p>Border-Radius Values:</p>
        <input type="number" name="topleft" onChange={this.handleChange} />
        <input type="number" name="topright" onChange={this.handleChange} />
        <input type="number" name="bottomright" onChange={this.handleChange} />
        <input type="number" name="bottomleft" onChange={this.handleChange} />
      </div>
    );
  }
}

export default App;

解决方法

内联样式无法识别

带编号的字符串。 borderRadius：“ 100”没有任何意义 你应该写 borderRadius：“ 100px”或borderRadius：100

您可以简单地更新handleChange函数以仅保留数字作为状态值。

更新代码

import React from 'react';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      topleft: 30,topright: 30,bottomright: 30,bottomleft: 30
    }
  }
  
  handleChange = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({[nam]: Number(val)});
  }
  
  render() {

    const borderStyle = {
      borderRadius: this.state.topleft,background: "#73AD21",padding: "20px",width: "200px",height: "150px",}
    
    return (
      <div className="App">
        <h1>Border-Radius Previewer</h1>
        <p style={borderStyle}>Box</p>
        <p>Border-Radius Values:</p>
        <input type="number" name="topleft" onChange={this.handleChange} />
        <input type="number" name="topright" onChange={this.handleChange} />
        <input type="number" name="bottomright" onChange={this.handleChange} />
        <input type="number" name="bottomleft" onChange={this.handleChange} />
      </div>
    );
  }
}

export default App;

,

我假设您想将topleft，topright，bottomright和bottomleft状态应用为borderRadius —您可以使用string interpolation来附加在每个值上px。

const { topleft,topright,bottomright,bottomleft } = this.state;

const borderStyle = {
  borderRadius: `${topleft}px ${topright}px ${bottomright}px ${bottomleft}px`,height: "150px"
};

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<div id="app_root"></div>    
<script type="text/babel">
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      topleft: 30,bottomleft: 30
    };
  }

  handleChange = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({ [nam]: val });
  };

  render() {
    const { topleft,bottomleft } = this.state;

    const borderStyle = {
      borderRadius: `${topleft}px ${topright}px ${bottomright}px ${bottomleft}px`,height: "150px"
    };

    return (
      <div className="App">
        <h1>Border-Radius Previewer</h1>
        <p style={borderStyle}>Box</p>
        <p>Border-Radius Values:</p>
        <input type="number" name="topleft" onChange={this.handleChange} />
        <input type="number" name="topright" onChange={this.handleChange} />
        <input type="number" name="bottomright" onChange={this.handleChange} />
        <input type="number" name="bottomleft" onChange={this.handleChange} />
      </div>
    );
  }
}

ReactDOM.render(<App />,document.getElementById("app_root"));

</script>

,

所以兄弟，您要做的就是在设置状态时在状态后附加一个字符串，这就是'px'的添加方式。完整代码

class App extends Component {
constructor(props) {
  super(props)
  this.state = {
    topleft: '30px',topright: '30px',bottomright: '30px',bottomleft: '30px'
  }
}

handleChange = (event) => {
  let nam = event.target.name;
  let val = event.target.value;
  this.setState({[nam]: val+'px'});
}

render() {
  console.log(this.state.topleft);
  const borderStyle = {
    borderRadius: this.state.topleft,}
  
  return (
    <div className="App">
      <h1>Border-Radius Previewer</h1>
      <p style={borderStyle}>Box</p>
      <p>Border-Radius Values:</p>
      <input type="string" name="topleft" onChange={this.handleChange} />
      <input type="string" name="topright" onChange={this.handleChange} />
      <input type="string" name="bottomright" onChange={this.handleChange} />
      <input type="string" name="bottomleft" onChange={this.handleChange} />
    </div>
  );
}

}

导出默认应用；