用户输入不会正确影响边界半径

Question

我的目标是创建一个边框半径预览器，用户可以在其中定义边框半径的影响。当我尝试输入值时，没有任何反应。当我删除我输入的值时，默认值更改就会消失。

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

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;

Answer 1

内联样式无法识别编号字符串。 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;

Answer 2

我想你想应用 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`,
  background: "#73AD21",
  padding: "20px",
  width: "200px",
  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,
      topright: 30,
      bottomright: 30,
      bottomleft: 30
    };
  }

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

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

    const borderStyle = {
      borderRadius: `${topleft}px ${topright}px ${bottomright}px ${bottomleft}px`,
      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>
    );
  }
}

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

</script>

Answer 3

所以你要做的兄弟是在设置状态时向状态附加一个字符串，这就是 'px' 是 added.Complete 代码

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,
    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="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>
  );
}

}

导出默认应用；

用户输入不会正确影响边界半径

User input not affecting border radius correctly

javascript

border

radius

reactjs